I’m getting an issue with scroll in ionic 4 and angular 7.
I have the following structure:
<ion-grid>
<ion-row>
<ion-col>
<ion-card>
<ion-card-header>
<!-- some content -->
</ion-card-header>
<ion-card-content>
<ion-list>
<!-- some ion-item -->
</ion-list>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col>
</ion-col>
</ion-row>
</ion-grid>
I apply a scroll on my ion-card-content with this following scss code :
ion-card-content {
max-height: calc(100% - #{50px});
position: relative;
overflow: hidden;
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
}
If I apply the following scss code on my ion-card the scroll will not work:
ion-card {
max-height: 100%;
}
If I apply the following scss code on my ion-card the scroll works but the size of ion-card is still the same, and when I have no ion-item in my ion-list it takes all the screen :
ion-card {
height: 100%;
}
Do you know any way to perform the scroll and keep an height that will size according to the ion-list size ?
(sorry for my english)