如何将离子模板分成两半?

时间:2017-10-25 22:26:29

标签: css ionic-framework flexbox

我使用atm离子网,带有离子色谱柱,适用于色谱柱,但问题是有一个表格,我想填充50%的视图。尝试设置它,但不起作用。

ion-grid{
    height: 100%;
}
ion-row.grid1{
    height: 50%;
} 

这是我的离子page.html,我希望除以2个部分。

    <ion-grid>
      <ion-row><ion-col col-12><h3>Tijuca</h3></ion-col></ion-row>
       <ion-row>
        <ion-col col-4> <ion-item>
            <ion-label fixed>Sexo:</ion-label>
            <ion-input type="text" value=""></ion-input>
          </ion-item>
        </ion-col> 
        <ion-col col-4>
            <ion-item>
                <ion-label fixed>Data:</ion-label>
                <ion-input type="datetime-local"></ion-input>
              </ion-item>
        </ion-col>
        <ion-col col-4>
            <ion-item>
                <ion-label fixed>Convenio:</ion-label>
                <ion-input type="date" value=""></ion-input>
              </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-12>
            <ion-item>
                <ion-label>Médico solicitante:</ion-label>
                <ion-input type="text" value=""></ion-input>
              </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-6>
            <ion-item>
                <ion-label>Tel. do Médico:</ion-label>
                <ion-input type="text" value=""></ion-input>
              </ion-item>
        </ion-col>
        <ion-col col-6>
            <ion-item>
                <ion-label>Especialidade médica:</ion-label>
                <ion-input type="text" value=""></ion-input>
              </ion-item>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-12>
          <ion-item>
            <ion-label>HDA:</ion-label>
            <ion-input type="text" value=""></ion-input>
          </ion-item>
        </ion-col>
       </ion-row>  
       <ion-row class="grid1">
            <table>
              <tbody>
              <tr>
            <!-- 16x3 table code inside here -->
              </tr>
              </tbody>
              </table>
      </ion-row>
    </ion-grid>

关于我应该寻找什么的任何想法?

0 个答案:

没有答案