Search code examples
cssionic-frameworkionic4

How do make Ionic 4 ion-col the same height

I have a page with a main card, which contains other small cards inside a grid. I want that all the col to have the same height, which will be the max height between the cols inside a specific row.

This is my template and my styling:

<ion-card color="blue">
  <ion-card-content class="welcome-card-content">
    <ion-grid class="ion-no-padding">
      <ion-row >
        <ion-col >
            <ion-card color="white-blue"class="small-card">
                <ion-card-content class="white-text">
                  <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 color="white-blue" class="small-card">
                <ion-card-content class="white-text">
                  <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-grid>
 </ion-card-content>
</ion-card>

Css file

.small-card{
  margin: 3px;
  height: inherit;
}


 ion-col{
   margin: 0px;
   padding: 0px;
   height: 100%;
 }

 ion-row{
   width: 100%;
   height: auto;
  }

This is my result so far:

enter image description here

Solution

  • 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.