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?