Div height 100% in a col and vertikal center a ion-icon in a col

Ionic Framework ionic-v3
1

Hello,

Two questions:

I habe a grid row with 3 cols all cols have a div with border and a text inside. The text habe different length. So that the three divs habe different heights. I want that all divs in the row have the same height. So that all boxes have the same look.

Than I have cols with ion-icons, how can I center them vertical?

2

Ok, when I use this code:

    <ion-row>
        <ion-col width-30>
            <div class="center white-box">
                <strong>VF / PVT</strong>
            </div>
        </ion-col>
        <ion-col width-30 (click)="roscPopup()">
            <div class="center white-box">
                <strong>ROSC</strong><br />
                <ion-icon  style="margin-top: 5px;" name="ios-information-circle-outline"></ion-icon>
            </div>
        </ion-col>
        <ion-col width-30>
            <div class="center white-box">
                <strong>PEA / Asystolie</strong>
            </div>
        </ion-col>
    </ion-row>

with this CSS:

ion-col div{
    height: 100%;
    padding: 5px;
}

.white-box{
    border: #000 solid 1px;
}

and use ionic serve on my Windows PC with Chrome i get 3 boxes with the same height.

But when I use ionic serve on my mac with Safari it doesn’t works. The Same then I build the app on my mac and run it on my iPhone.

3

No solution for the Problem with heigth and iOS? I cant believe, that I am the only one who want to have boxes wich have the same height in a row.

4

Any solution for your problem? Can you share? thanks