CODEWITHSUNDEEP
angularjsionic-frameworkionic2ionic3
Razvan-Catalin Olaru
Razvan-Catalin Olaru

Reputation: 465

Ionic 3 virtual scroll only displays a small part of the items

I'm having trouble with the Ionic 3.3.0 virtual scroll due to the fact that I have a ~360 items array and it only displays the first 15 on the phone. Has anyone encountered this issue?

P.S.: The virtual scroll list is in a container that has 35% of the screen height. Don't know if this has an effect on the issue or not... 

this.friendsList = [{name: 'John'},...,{name: 'Zed'}];

<div class="friends-list__container">
  <ion-list [virtualScroll]="friendsList">
    <ion-item *virtualItem="let friend">
      {{friend.name}}
    </ion-item>
  </ion-list>
</div>

Upvotes: 2

Views: 2144

Answers (1)

Razvan-Catalin Olaru
Razvan-Catalin Olaru

Reputation: 465

After researching the issue, it seems that the solution was to add an extra DIV wrapper around the virtual scroll list:

<div class="friends-list__container">
  <div> <!-- This is needed for the virtual scroll to work properly -->
    <ion-list [virtualScroll]="friendsList">
      <ion-item *virtualItem="let friend">
        {{friend.name}}
      </ion-item>
    </ion-list>
  </div>
</div>

Upvotes: 4

Related Questions