离子2:仿真器中不显示高度百分比和设置宽度
离子2:仿真器中不显示高度百分比和设置宽度
提问于 2016-12-31 00:38:27
我的模板中有一个名为home.html的离子网格元素，在该网格中有一行包含三列：
<ion-row>
<ion-col>...</ion-col>
<ion-col width-10>
<ion-row class="full-height j-a-center">
<div class="vrt-line"></div>
</ion-row>
</ion-col>
<ion-col>...</ion-col>
</ion-row>这个“...”ion-cols在chrome和ios模拟器中都能正确显示所有内容。但是，当我模拟ios时，vrt-line div不会显示任何内容，除非我使用静态高度而不是百分比，即使这样，vrt-line div也不会在行中居中。我在整个应用中都使用了同样的居中“技巧”，这是唯一有问题的地方。
.full-height {
height: 100%;
min-height: 100%;
}
.j-a-center {
align-items: center;
justify-content: center;
}
// Works in chrome, but nothing shows up in emulator. However, all of the spacing with ion-cols are correct.
.vrt-line {
width: 2px;
height: 100%;
background: #ffffff;
position: relative;
}
//Line appears in both emulator and chrome, but is not centered/aligned in emulator.
.vrt-line {
width: 2px;
height: 100px;
background: #ffffff;
position: relative;
}有什么想法吗？
回答 1
Stack Overflow用户
发布于 2016-12-31 01:47:42
我最终玩弄了容器的每个父元素的高度。给每个元素一个独特的背景颜色使得测试变得更容易一些。最终，我的解决方案是将每个父容器上的“全高”类用于最内层的子离子行。我有一种感觉，这是一个变通的工作。但它起作用了。
<ion-grid class="full-height">
<ion-row class="full-height">
<ion-col>...</ion-col>
<ion-col width-10 class="full-height">
<ion-row class="full-height j-a-center">
<div class="vrt-line"></div>
</ion-row>
</ion-col>
<ion-col>...</ion-col>
</ion-row>
</ion-grid>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41399574
复制相关文章
相似问题
腾讯云开发者
