Reputation: 125
In my page I use two components next to each other like this:
<ion-content>
<ion-row>
<ion-col size=4>
<list-component></list-component>
</ion-col>
<ion-col size=8>
<news-component></news-component>
</ion-col>
</ion-row>
In the list-component I want to use a scrollable list like this from the ionic docs:
<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
</ion-list>
When I use it like this, the whole page scrolls including the news-component. So I checked google and found that I need to use the list inside an ion-content block. So I tried it like this:
<ion-content
[scrollEvents]="true"
(ionScrollStart)="logScrollStart()"
(ionScroll)="logScrolling($event)"
(ionScrollEnd)="logScrollEnd()">
<ion-list>
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
</ion-list>
</ion-content>
But now I have the problem that the list is shown only in a small window and not in the whole component.
When I add a height like example below it works, but then it is not dynamic. I want to give it like 90% of the height of the component. But my magic is not that strong to do so... 😢
<ion-content style="height: 66vh">
What do I have forgotten to make it work?
Ionic:
Ionic CLI : 5.4.5 (/usr/local/lib/node_modules/ionic) Ionic Framework : @ionic/angular 4.11.3 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0
Utility:
cordova-res : not installed native-run : not installed
System:
NodeJS : v12.4.0 (/usr/local/bin/node) npm : 6.9.0 OS : macOS Catalina
Upvotes: 0
Views: 1046
Reputation: 125
Okay, After I had a look at it again three weeks later, it works as expected. I don't know why, but this can be closed.
Upvotes: 0