我的模板中有一个名为home.html的ion-grid元素,在该网格中是一行包含三列的行:
<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;
}
有任何想法吗?
最佳答案
我最终在容器中每个父元素的高度上玩耍。为每个元素提供独特的背景色使测试变得容易一些。最终,我的解决方法是在每个父容器的最内部子离子行上使用“全高”类。我觉得这有点麻烦。但这行得通。
<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>