ionic-framework: VirtualScroll data doesn't render (very basic setup with no functionality)

Ionic version: (check one with “x”) [ ] 1.x [x] 2.x

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Not rendering a simple list. (Just post titles without any conditionals or complex logic). gif

Expected behavior: Have the virtuallist display the text without disappearing.

Steps to reproduce: I’ve setup a brand new Ionic2 app and pasted in the example from the docs. I have a repo with the code: https://github.com/BAWES/ionic-virtual-scroll

Related code:

<ion-list [virtualScroll]="items" [approxItemHeight]="'40px'">

    <ion-item *virtualItem="let item">
      {{ item.title }}>
    </ion-item>

  </ion-list>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.11 
OS: OS X El Capitan
Node Version: v7.5.0
Xcode version: Xcode 6.3 Build version 6D570

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 9
Comments: 27 (2 by maintainers)

Most upvoted comments

Got this error in ionic 3.0.0. virtual-scroll and ion-img are completely unusable now :-\

+11

pavimus on Apr 7, 2017

virtual scroll randomly does not show some items, especially when scrolling top or bottom, on 3.10.3:

ionic info

cli packages: (/Users/pietroturati/.nvm/versions/node/v6.9.2/lib/node_modules)

@ionic/cli-utils  : 1.10.2
ionic (Ionic CLI) : 3.10.3

global packages:

Cordova CLI : 7.0.1

local packages:

@ionic/app-scripts : 0.0.48
Cordova Platforms  : browser 4.1.0
Ionic Framework    : ionic-angular 2.0.0-rc.4

System:

Android SDK Tools : 26.0.2
ios-deploy        : 1.9.2
ios-sim           : 6.1.2
Node              : v6.9.2
npm               : 3.10.9
OS                : OS X El Capitan
Xcode             : Xcode 8.2.1 Build version 8C1002

Virtualscroll is a powerful and vital feature, when it will be fixed ? Tried with old versions, never worked fine.

demym on Nov 8, 2017

For me it gets the data in the dom but there’s nothing inside the virtualScroll element as you can see below:

2017-05-22 14_43_29-developer tools - file____android_asset_www_index html

Cordova CLI: 6.5.0 Ionic Framework Version: 3.2.0 Ionic CLI Version: 2.2.1 Ionic App Lib Version: 2.2.0 Ionic App Scripts Version: 1.3.7 ios-deploy version: Not installed ios-sim version: Not installed OS: Windows 7 Node Version: v6.9.1 Xcode version: Not installed

Xlander11 on May 22, 2017

I’m having this issue too. I’m on Ionic 3.9.2. Nothing in the list is visible sometimes. Happens rarely. I would say it happens 10% of the time. Only way to get the list back is to close the page and open it again. I really need to get this fixed. In my case, problem is there is no exact way to reproduce the issue.

malwatte on Sep 18, 2018

Never got it to work 😦

ghost on Sep 13, 2018

I am also experiencing issues. Nothing gets shown, but if I set the list with a timeout of 100 ms, the content will get shown. Whenever I at some point remove something from that list, it works. But, then after I add something, the last item of that list is not displayed, but height for that item is taken into account…

I’m on ionic 3.19.1

OlivierHokke on Jan 29, 2018

had the same problem. When I initialize the array where the async call stores the items afterwards it starts working again.

private items = []; //important!
// private items = null; // didn't work

constructor(public navCtrl: NavController, public navParams: NavParams, private provider: MyAsyncProvider) {
  this.provider.getData().subscribe((data) => {
    this.items = data;
  });  
}

fastrde on Jun 19, 2017

Same issue here as well. When navigating to a page with a virtual scroll list, it renders sometimes and doesn’t ( seemingly randomly).

rehannawab on Apr 13, 2017

Had the same problem but migration to 3.0.1 (since yesterday) solved it ! Thanks for the update

stockrel on Apr 7, 2017