VirtualScroll elements disappear to early from the view


#1

Hi, since I upgraded from ionic 2.2.1 to the latest 3.9.2 i have an issue with the VirtualScroll.

Here is the start page (there is a toolbar in header):

When i start scroll to the bottom (everything is fine):

When i scroll a bit more, the first element of the list disappear to early and we can see a huge blank space which is awful. It should disappear when the first element is almost visible on the top. :

When I delete the toolbar in the header it fixes the issue so I think the Virtual scroll doesn’t understand that there is this gap between the top of screen and the start of the virtual scroll. How can I tell him that this gap exists?

It happens on both serve and devices.
It happens not only on the first element of list but on all the elements.

 <ion-list [virtualScroll]="feed.posts" approxItemHeight="225px"  no-lines>
    <div class="feed-item" *virtualItem="let post" style="width: 100%">
       <ion-card> ... </ion-card>
    </div>
 </ion-list>
Cordova CLI: 8.0.0 
Ionic Framework Version: 3.9.2
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 3.1.7
ios-deploy version: 1.9.2 
ios-sim version: 6.1.2 
OS: macOS Sierra
Node Version: v9.3.0
Xcode version: Xcode 9.2 Build version 9C40b

#2

can you show us your header code? How do you hide it?


#3

The toolbar and the ion-list are in position relative so the are hidden automatically on scroll.

Here is the code of the toolbar in header:

  <ion-toolbar class="search-toolbar border-bottom">
    <span class="actual-pos" placeholder="" (click)="showAddressModal()" >{{adresse_actuelle}}</span>
    <ion-buttons start>
      <button ion-button icon-only (click)="showAddressModal()" class="geolocation-button" >
        <ion-icon name="search"> </ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>

  <form [formGroup]="rangeForm" >
    <ion-list class="range-list">
      <ion-item class="range-item single-range">
        <ion-label>
          <h2 class="range-label">Distance maximale:</h2>
          <h3 class="range-value">{{rangeForm.controls.single.value}}km</h3>
        </ion-label>
        <ion-range formControlName="single" (ionChange)="rangeChange($event)" min="1" max="50" step="1" snaps="true" pin="false" ></ion-range>
      </ion-item>
    </ion-list>
  </form>

#4

I hope you hidden them with *ngIf not with *ngHidden.

I think you need to update the Virtual scroll somehow after you hide the toolbar, so that it can recalculate the spacing.


#5

The thing is I don’t hide the toolbar, it is hidden by the viewport on scrolling, do you have an idea on how I can update the VirtualScroll ?


#6

How? can you show why it is hiding?

Not really, but I can think of getting the Virtual scroll somehow in code like you do it with the slider and calling somesort of refresh function on it.


#7

It is hiding like this comment when you scroll to the top of this page.


#8

then expand your page to give it more room