Hello, I am facing a very specific issue that I can't seem to resolve:
I have two containers (ion-card) and I want them to always be the same height. I was able to achieve this by following the solution provided here:
https://i.sstatic.net/he8O7.png
The problem lies in the fact that the text on the left does not occupy the full height of the card, which is not visually appealing. I tried increasing the font size, but this only made the imbalance between the left and right sides more apparent (the ion-card would increase in height, but not the images).
In addition, the text actually comes from another component (not sure if this contributes to the issue or not).
Here is the Ionic code:
<ion-grid>
<div class="card-height">
<ion-row>
<ion-col>
<ion-card>
<ion-card-header>
<ion-card-title class="card-header">Test </ion-card-title>
</ion-card-header>
<ion-card-content>
<!-- The component that contains the text -->
<app-results></app-results>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
<ion-card>
<ion-card-header>
<ion-card-title class="card-header">Galerie </ion-card-title>
</ion-card-header>
<ion-card-content>
<hr />
<hr />
<ion-grid>
<ion-row>
<ion-col><img src="assets/profil_image.png"/></ion-col>
<ion-col><img src="assets/profil_image.png"/></ion-col>
<ion-col><img src="assets/profil_image.png" /></ion-col>
</ion-row>
<ion-row>
<ion-col><img src="assets/profil_image.png" /></ion-col>
<ion-col><img src="assets/profil_image.png" /></ion-col>
<ion-col><img src="assets/profil_image.png" /></ion-col>
</ion-row>
<ion-row>
<ion-col><img src="assets/profil_image.png" /></ion-col>
<ion-col><img src="assets/profil_image.png" /></ion-col>
<ion-col><img src="assets/profil_image.png" /></ion-col>
<ion-col><img src="assets/profil_image.png" /></ion-col>
<ion-col><img src="assets/profil_image.png" /></ion-col>
</ion-row>
</ion-grid>
<div style="text-align: center">
<ion-button
style="width: 200px"
color="medium"
fill="outline"
shape="round"
>Become V.I.P.</ion-button
>
</div>
</div>
<ion-item lines="none">
<ion-icon
slot="end"
name="pencil-outline"
class="pointer"
></ion-icon>
</ion-item>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</div></ion-grid>
Here is the SCSS:
.card-height {
display: flex;
flex-wrap: wrap;
overflow: hidden;
ion-col {
display: flex;
justify-content: center;
}
ion-card {
width: 100%;
}
}
The app-result component:
<div *ngFor="let item of uniqueResults">
<ion-text
[ngClass]="{
'result-100': item?.average >= 75 || item?.average >= 100,
'result-90': item?.average >= 62 || item?.average >= 74,
'result-80': item?.average >= 6 || item?.average >= 61,
'result-70': item?.average >= 0 || item?.average >= 5}"
>{{item?.role}} - {{item?.average }} %
</ion-text>
<br />
</div>
<div style="text-align: center">
<ion-button
style="width: 200px"
color="medium"
fill="outline"
shape="round"
[routerLink]="['/test']"
>
Test
</ion-button>
</div>