In my Ionic app, I am using ion-slide-box
with 3 slides. Each slide contains an ion-list
(table view) with varying numbers of items. The issue is that when scrolling through the shorter list items, it shows empty content due to the taller sibling list taking up more space.
See example here.
How can I fix this behavior?
<ion-slide-box>
<ion-slide>
<ion-list>
// LIST A: this list view contains ~1000 items and is the tallest
</ion-list>
</<ion-slide>
<ion-slide>
<ion-list>
// LIST B: this list view contains only ~5 items and is the shortest
</ion-list>
</<ion-slide>
<ion-slide>
<ion-list>
// LIST C: this list view contains ~400 items
</ion-list>
</<ion-slide>
</ion-slide-box>