Multiple virtual scroll list in a view

Ionic Framework ionic-v3
1

Hey everyone,

I would like to display a virtual scroll list spreading only half of the screen.

However, the list only displays some of the items (number depending on the size of the view) and the following items are never shown.

<style>
  .sent-card {
    height: 30%;
    overflow-y: scroll;
  }
  
  .sent-card-virtual {
    height: 70%;
    overflow-y: scroll;
  }
</style>

<ion-content padding>
  <ion-card class="sent-card">
    <ion-list>
      <p ion-item *ngFor="let sent of sentences">
        {{sent}}
      </p>
    </ion-list>
  </ion-card>
  <ion-card class="sent-card-virtual">
    <ion-list [virtualScroll]="sentences">
      <p ion-item *virtualItem="let sent">
        {{sent}}
      </p>
    </ion-list>
  </ion-card>
</ion-content>

I made a plunker to illustrate the problem:

When I set the height ratio differently, the number of shown items in the virtual scroll list differs.

Is it possible to use the virtual scroll this way? It is not important to me that the list is in a card, but I need multiple virtual scrolls in one view.

Thank you for your time and a great framework
Pavol

2 Likes