Virtual Scroll Not Working

Ionic Framework ionic-v3
1

I have a page that looks something like this:

    <ion-title>
        Page Title
    </ion-title>
    <ion-content>
        <div class="view-one">
            <div>
                Headers, Filters, Etc.
            </div>
            <ion-list no-lines [virtualScroll]="list" [approxItemHeight]="'140px'">
                <ion-item *virtualItem="let item">
                    <div class="item">
                        Item Stuff
                    </div>
                </ion-item>
            </ion-list>
        </div>
        <div class="view-two">
        </div>
    </ion-content>

I can not get the virtual scroll on the list of items to work. If I add a second <ion-content> tag around the list, it works in chrome but not on any device. I am trying to stay away from using two <ion-content> tags anyways. I can not have the list as a direct child of the <ion-content> tag because of all of the other elements that must exist on the page, and because the list may have hundreds of items I need to lazy-load them.

As is, the list does not show at all and instead displays an empty area where it should be.

Can anyone point me in the right direction?

2

Am having the same issue as you… Am on ionic 3.6 *ngFor works, but ofcourse it not good for long scroll with images. Virtualscroll is not displaying any list… Anyone to help on this.

Thanks in advance

3

Hi, did anyone find a solution to this? I am having the same issue on one page. I have a near identical page where virtual scroll does work. Not sure what the problem is.