Nested div in ion-col, 100% height not work in safary

Ionic Framework ionic-v3
1

I use ionic 2.

I have the follwing template:

HTML

<ion-grid>
<ion-row>
    <ion-col width-20>
        <div>
            <img src="http://www.kacholy.com/new_site/pic/image_7276.jpg">
        </div>
    </ion-col>
    <ion-col class="secondaryPic" width-20>
        <div class="placeHolder"></div>
    </ion-col>
     <ion-col class="secondaryPic" width-20>
        <div class="placeHolder"></div>
    </ion-col>
</ion-row>

css:

 .placeHolder{
            width: 100%;
            height: 97%;
            border: 2px solid deeppink
        }

Here is the result at chrome:

here is the result at safary - the problem is that div not stretched to all of ion-col height. Iv view-inspector I see that the ion-col get the height of the image near.

Any solution?

2

hopefully see
this link

in that plunker
try this ccode in home.page.html

<ion-content padding>
  <ion-item>
    <ion-grid>
      <ion-row item-content>
        <ion-col width-20>
          <div>
            <img src="http://www.kacholy.com/new_site/pic/image_7276.jpg">
          </div>
        </ion-col>
        <ion-col class="secondaryPic" width-40>
          <div class="placeHolder"></div>
        </ion-col>
        <ion-col class="secondaryPic" width-40>
          <div class="placeHolder"></div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>
</ion-content>
3

encounter this before…you need to set height to 0px and use padding-bottom instead

.placeHolder{
width: 100%;
height:0px;
padding-bootom:97%;
border: 2px solid deeppink
}

4

@Thavarajan, not good for me, I don’t need the ion-col to have border. I need the div inside.

5

@chanyap92, Can you give piece of code sample?

UPDATE:

here is a code sample. aLL what I needed is to replace ‘height’ with ‘padding-bottom’. thnaks, @chanyap92

 .placeHolder{
        width: 100%;
        padding-bootom:97%;
        border: 2px solid deeppink
    }



<ion-row>
<ion-col width-20>
    <div>
        <img src="http://www.kacholy.com/new_site/pic/image_7276.jpg">
    </div>
</ion-col>
<ion-col class="secondaryPic" width-20>
    <div class="placeHolder"></div>
</ion-col>
 <ion-col class="secondaryPic" width-20>
    <div class="placeHolder"></div>
</ion-col>
</ion-row>
6

@chanyap92, but now - it is not looked well at chrome…
I can , of course, to build conditional-css by device type, but isn’t there any way to get the same result at safary and at chrome?

7

You can try adding height:0px too

rut_nativ
November 27

@chanyap92, but now - it is not looked well at chrome…
I can , of course, to build conditional-css by device type, but isn’t
there any way to get the same result at safary and at chrome?

Visit Topic or reply to this email to respond.

In Reply To
chanyap92
November 25
encounter this before…you need to set height to 0px and use
padding-bottom instead .placeHolder{ width: 100%; height:0px;
padding-bootom:97%; border: 2px solid deeppink }

8

I added but it not work well at chrome.

9

well i thought you did it

here is the plunker
i feel that it will solve your issue

10

Thanks!!
This is the perfect solution.