VirtualScroll elements disappear to early from the view

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
1 Like

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

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>

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.

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 ?

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.

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

then expand your page to give it more room