Debo Debo - 5 months ago 56
CSS Question

Set ion-row height size in Ionic2

I need 3 horizontal rows in my page: the first row containing 3 columns, 2nd containing 2 and the 3rd containing 1; however I am unable to set the height of the rows. It all should be of same size and occupy the whole content area. The below code will make the rows occupy only a small portion of the content area. If I specify the height of the row class in % it is not changing; however in pixels it is working, but I don't want my code to be this rigid. Thanks in advance for any help!

<div style = "height : 37%; width : 83px; width : 100%; padding : none; border-bottom: 1px solid #D8DFEC; margin : none; background-size: 100% 100%; background-position: center; background-image: url('images/MyHome.PNG'); border-top: 1px solid #D8DFEC; border-bottom: 1px solid #D8DFEC"></div>

<ion-row text-center>

<ion-col col-4>A</ion-col>
<ion-col col-4>B</ion-col>
<ion-col col-4>C</ion-col>


<ion-row text-center>

<ion-col col-4>D</ion-col>
<ion-col col-4>E</ion-col>


<ion-row text-center>

<ion-col col-4>F</ion-col>



Answer Source

I'm pretty sure that the problem is that setting the height of each row by using a percentage value, is relative to the height of the container (the ion-grid). So you can do that by first setting the height of the grid to be the 100% of the content, and then you can set the height of the rows to be 33%:

ion-grid {
  height: 100%;

  ion-row {
    height: 33.33%;

You can take a look at this working plunker

(Note: In the plunker the styles has been placed inline in the html code just to make the demo easier. They should be placed in the page.scss file corresponding to that page)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download