我的模板中有一个名为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>

07-24 09:43
查看更多