Ionic-framework: bug: Cards in a virtual scroll have a massive gap

[Slavrix]

Bug Report

Ionic version:
[x] 4.x

Current behavior:
Cards in a virtual scroll have a massive gap

Expected behavior:
They should not have a massive gap
(was working fine in 4.5.0)

Steps to reproduce:

Related code:

 <ion-virtual-scroll [items]="filteredEvents" approxItemHeight="200px" [headerFn]="eventDaySplit" approxHeaderHeight="35px">
    <ion-item-divider *virtualHeader="let header">
      <ion-label>{{header | amDateFormat:'dddd DD MMMM'}}</ion-label>
    </ion-item-divider>
    <ion-card *virtualItem="let event; let itemBounds = bounds;">
      <ion-item [ngClass]="rightBorderClass(event.attending)" (click)="gotoViewEvent(event, event.attending)">
          <ion-label text-wrap>
          <ion-text color="primary" *ngIf="event.name">
            <h2>
              <span *ngIf="event?.group_details?.length==1">{{event.group_details[0].shortName}} | </span>
              <span *ngIf="event?.group_details?.length>1">{{event.group_details.length}} Groups | </span>
              {{event.name}}
            </h2>
          </ion-text>
          <ion-text color="primary" *ngIf="!event.name"><h2>No Event Name</h2></ion-text>
          <ion-text color="primary" *ngIf="event.type"><h2> {{event.type}} <span *ngIf="event.type=='Game' || event.type=='Final'">vs {{event.opponent}}</span></h2></ion-text>
          <p>
            {{event.startDatetime | amDateFormat:'HH:mm' }}<span *ngIf="event.endDatetime"> to {{event.endDatetime | amDateFormat:'HH:mm' }}</span>
          </p>
          <ion-text color="danger" *ngIf="event.cancelled"><h2><i>CANCELLED</i></h2></ion-text>
          <p id="location-text" *ngIf="event.location">{{event.location}}</p>
          <p id="location-text" *ngIf="event.address.readable">{{event.address?.readable}}</p>
        <p class="italic">
          {{event.private?'Private':'Public'}}
        </p>
        <p *ngIf="event.childInvited.length==1">Child Invited: {{event.childInvited.length}}</p>
        <p *ngIf="event.childInvited.length>1">Children Invited: {{event.childInvited.length}}</p>
          </ion-label>
          <ion-icon color="dark" name="lock" slot="end" *ngIf="event.cancelled || isInPast(event.startDatetime)"></ion-icon>
      </ion-item>
    </ion-card>
  </ion-virtual-scroll>

I’m filling in the filteredEvents object inside an observable server call.

EventService.call('event.getEvents', this.selectedOrganisation._id, this.activities.theDate.format(), this.profile.isAdmin).subscribe((events: any) => {
        this.events = this.dateSortPipe.transform(events);
        this.filteredEvents = this.applyFiltersToEvents(this.events);
        this.virtualScroll.checkEnd();
        this.presenters.dismissLoader();
        console.log('event sub list admin', this.events);
      });

Other information:
https://forum.ionicframework.com/t/virtual-scroll-no-longer-working-correctly-after-upgrading-to-4-6/168560

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.0 (/Users/admin/.npm-packages/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 8 other plugins)

Utility:

   cordova-res : 0.3.0 (update available: 0.5.1)
   native-run  : not installed

System:

   Android SDK Tools : 26.1.1 (/Users/admin/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.1
   NodeJS            : v12.3.1 (/usr/local/Cellar/node/12.3.1/bin/node)
   npm               : 6.9.0
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

[Slavrix]

I'm trying to cut down my code to create a demo of the bug atm.

[mbaric1]

Same issue with

Ionic:

   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

@Slavrix Please update issue title.

[Mazus]

Anything new ?
Do you know latest working version ?

[liamdebeasi]

Thanks for the issue! I was able to reproduce this using the example in the virtual scroll docs: https://ionicframework.com/docs/api/virtual-scroll

[brandyscarney]

Fixed by https://github.com/ionic-team/ionic/commit/3ef6ecf422dfd64158ed5332b1604a3b78613457, this will be in the next release, thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.