Make ionic cards side by side the same height

Ionic Framework Ionic Angular
1

I have two cards side by side:

<ion-content id="main">
  <ion-grid>
    <ion-row>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
          ...
        </ion-card>
      </ion-col>
      <ion-col size-xs="12" size-md="6">
        <ion-card>
         ...
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

how do I make them the same height?

Screenshot 2021-08-17 at 2.40.01 PM
Screenshot 2021-08-17 at 2.40.01 PM1904Ă—323 8.76 KB

2

what about a height: 100% :thinking:

1 Like
3

By adding a fixed height to the card.

4

There are other contents in the page where a height: 100%; will block

5

Percentage values for height are relative to the containing block element, so as long as you have a structure like the following:

<foo>
  <bar>a</bar>
  <bar>b</bar>
</foo>

…I don’t see how giving a height: 100% on each bar would have any effect on anything outside the <foo> that encloses them.

3 Likes
6

Thank you! I tried doing this:

<ion-content id="main">
  <ion-grid>
    <ion-row>
      <ion-col size-xs="12" size-md="6">
        <ion-card style="height: 100%;">
          ...
        </ion-card>
      </ion-col>
      <ion-col size-xs="12" size-md="6">
        <ion-card style="height: 100%;">
          ...
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

but now the cards seem a bit too long:

Screenshot 2021-08-17 at 8.32.36 PM
Screenshot 2021-08-17 at 8.32.36 PM1177Ă—343 7.95 KB

Also is there a way for there to be card footers, like those in bootstrap where we can place an element at the very bottom of the card? I tried using ion-footer both inside and out of ion-card-content to no avail!

7

That doesn’t adhere to the structure I described, so percentage heights are not going to be operating off the same baseline. In order for percentage heights to work as equalizers, all of the <ion-card> elements have to be siblings. The ones in this post are cousins, because you have to go up two levels in the DOM (to the <ion-row>) to get to a common container.

So I don’t see how one would do this using <ion-grid> unless you want to set heights for the cards explicitly (as @mikrochipkid is suggesting).

Personally, what I would do is to ditch Ionic’s grid entirely, and just use CSS Grid. I would think align-self: stretch (which is the default) would do exactly what you are wanting in the first place.

I don’t know, but I do know that:

No on this. <ion-footer> must be a root child of a page, and doesn’t have any connection to cards.

8

Before trying to fix height, You must know how much height is occupied by the card containing large data. You must get the height of that card using javascript and fix that height to both the cards…