Hello everyone,
I want to place three individually scrollable containers (two ion-lists, one detail page) on one page. When searching for posts where similar issues have come up it’s usually recommended to use ion-scrolls. But they don’t work. The only approach that was kind of fruitful was to just wrap each of those containers with an ion-content but as soon as I add it to the third containers, all of the containers disappear.
<ion-content scroll="false">
<ion-row>
<ion-col col-4>
<ion-scroll scrollY="true" style="height:100vh">
<ion-list>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
</ion-list>
</ion-scroll>
</ion-col>
<ion-col col-4>
<ion-content>
<ion-scroll scrollY="true" style="height:100vh">
<ion-list>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
<ion-item>
<div>
Something
</div>
</ion-item>
</ion-list>
</ion-scroll>
</ion-content>
</ion-col>
<ion-col col-4>
<ion-content>
<ion-scroll scrollY="true" style="height:100vh">
<ion-card>
<img src="../assets/imgs/Download.jpg"/>
</ion-card>
</ion-scroll>
</ion-content>
</ion-col>
</ion-row>
</ion-content>
Does anybody know a solution to this problem?
I use the latest version of Ionic 3.
Best regards,
Moons