How Do Make Ionic 4 Ion-Col The Same Height

How do make Ionic 4 ion-col the same height

So here is your solution:

  <div color="primary" class="main-card">
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="flash"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>a very long text that takes a lot of vertical space</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="add"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>simple text</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="flash"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>a very long text that takes a lot of vertical space</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-card>
          <ion-card-content>
            <ion-row class="ion-justify-content-center">
              <ion-icon class="home-icons" name="add"></ion-icon>
            </ion-row>
            <ion-row class="ion-justify-content-center">
              <ion-text>simple text</ion-text>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </div>

scss file

 .main-card {
  background: var(--ion-color-primary);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  margin: 12px;
  overflow: hidden;
  ion-col {
    display: flex;
    justify-content: center;
    padding: 4px;
  }
  ion-card {
    background: #55bdef;
    margin-bottom: 12px;
    margin-top: 12px;
    width: 100%;
  }
  ion-card-content {
    color: #fff;
  }
}

This will solve your problem.

Make ionic cards side by side the same height

HTML file:

<ion-content id="main">
  <ion-grid>
    <ion-row>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
          <ion-card-title>Projected</ion-card-title>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elit felis, luctus in vehicula id, egestas
            sed magna.</p>
        </ion-card>
      </ion-col>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
          <ion-card-title>Required</ion-card-title>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

CSS file:

ion-col {
  display: flex;
}
ion-card {
  padding: 5px;
}

Set ion-card at same size in a a ion-grid

You need to wrap each row in a column.

<ion-grid>
 <ion-col size="12">
  <ion-row *ngFor = let item of items'>
   <ion-card>
    <ion-img  [src]='item.imagePath'></ion-img>
         <ion-header>
          <ion-card-title class='ion-text-center'> {{ item?.title }} </ion-card-title>
          <ion-card-subtitle class='ion-text-center'> {{ item?.price }} </ion-card-subtitle>
        </ion-header>
        <!-- <ion-card-content class='ion-text-wrap'> {{ item?.description }} </ion-card-content> -->
      </ion-card>
  </ion-row>
 </ion-col>
</ion-grid>

and in you CSS do this....

 ion-card{
  display: flex;
  flex-direction: column;
  width: 100% !important;
  margin: 0 !important;
 }

Ionic2 gird with equal height content

I fixed it , by adding these styles to ion-col

.product-col{
  display: flex;
  justify-content: center;
}

and now it works as intended!

Changing IonRow height in Ionic 5

There are many ways to do that, for example in the .scss file add:

ion-grid {
    height: 120px;

    ion-row{
        height: 20px;
    }

    ion-col {
        border: 0.3px solid #f4f4f4;    
    }
}

And also "extra style":

ion-row.myHeight{
    height: 40px;
}

Same Height Cards in Ionic

It's because when you are using item-image class, Ionic sets images width to 100% and when you test your app on laptop or desktop, the right image can be shown in 100% of width and 100% of height, but when you test your app on phone, when browser tries to set the image width to 100%, the image height changes to less than 100%‍‍‍‍, and as you've seen the height of images is different, you should change your strategy

ionic 4 ion-col showing too much space in iphone x

You just need to remove margin top and the bottom on ion-card.

Change this to:

ion-row{
    ion-card{
        width:100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    matgin-top: 0 !important;
    img{
        width:100%;
    }
}

This:

ion-row{
    ion-card{
    width:100% !important;
    margin: 0 !important; // I also dont think important is neccesary
    img{
        width:100%;
    }
}

Set ion-row height size in Ionic2

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)

---

Related Topics