m8xp0w3r
m8xp0w3r

Reputation: 125

Ion-content with ion-list only shown in small area of my component

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.

List in small window

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">

List with static height

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

Answers (1)

m8xp0w3r
m8xp0w3r

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

Related Questions