Ionic 2: Fix VirtualScroll overlapping items bug

If you're using a VirtualScroll component with variable height items, they can appear overlapped. This is a workaround.

The Problem:

If you're using a VirtualScroll component with variable height items, they can appear overlapped on first render. This workaround enables you to manually/programmatically resize the rows so they render properly.

The Fix:

1) Import ViewChild into your class:

import { ViewChild } from [email protected]/core';

2) Decorate your VirtualScroll list with an Id and reference it e.g.:

<ion-list #virtualScroll
... 
export class MyJobsPage {
    @ViewChild('virtualScroll', { read: VirtualScroll }) virtualScroll: VirtualScroll;
...

3) After binding your list data, do a resize manually with a timeout to allow the render e.g.:

var loadingOverlay = this._loadingController.create({
  content: 'loading'
});
loadingOverlay.present();
this.listData = whateverData;
setTimeout(() => {
    this.virtualScroll.resize();
    loadingOverlay.dismiss();
}, 1000);

Note: I added a loading spinner to cover the page so it looks a bit nicer before it resizes.

Conclusion:

VirtualScroll is a bit broken at the moment. Hopefully the Ionic team will get it sorted soon.

Cheers.

Comments: