I have a bootstrap / angular project. In every browser the cards have the height of the row / col. i have even set it to 100%, but in safari it is not working correctly. In firefox, chrome and edge its fine.
Can sombody help me?
Code
parent:
home-page.html
<div class="position-relative padding-top-2rem card-container">
<div class="container">
<!-- title -->
<h4 class="text-align-center boldLucas">
{{'product-page.title.useTheMostInnovativeOSWithNetworkConnectivity' | translate}}
</h4>
<!-- cards -->
<div class="row row-cols-sm-1 row-cols-md-2 row-cols-xl-{{cardElements.length}} g-3 py-5">
<app-card-content *ngFor="let cardElement of cardElements" [cardElement]="cardElement"></app-card-content>
</div>
</div>
</div>
home-page.css
.card-container {
background-color: #0A0D2F !important;
}
child:
card-component.html
<div class="col card-box-schaddow" id="card-box-schaddow-{{cardElement.icon}}">
<a role="button" class="card btn" [href]="'#'+cardElement.id">
<div class="card-body">
<img class="row-box-icon"
src="../../../assets/fonts/icons/{{cardElement.icon}}.svg"
alt="Icon not found"/>
<h4 class="bold card-title text-align-center">
{{cardElement.title | translate}}<span class="bi-chevron-right bold"></span>
</h4>
<p class="card-text text-align-center py-2" [innerHtml]="cardElement.text | translate"></p>
</div>
</a>
</div>
card-component.css
/* classes */
.row-box-icon {
width: auto;
margin-bottom: 5%;
}
.card, .card:hover {
height: 100% !important;
border-radius: 9px;
background-color: rgba(14, 44, 103, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
}
.card-box-schaddow {
border-radius: 50%;
}
.card-text {
font-size: 1rem;
}
.card-title {
padding-top: 1rem;
}
chrome, firefox, edge:
enter image description here
safari:
enter image description here
I tried:
.card, .card:hover {
height: 100% !important;
// ...
}
.card, .card:hover {
min-height: 100% !important;
// ...
}
.card, .card:hover {
height: 100% !important;
min-height: 100% !important;
// ...
}
etc. but i cannot find the solution..
2
Answers
i found the answer! it's
home-page.css
safari enter image description here
For your solution try to read that explanation on stackoverflow.
Chrome / Safari not filling 100% height of flex parent