approxItemHeight not working in virtualScroll

Ionic Framework ionic-v3
1

I have a virtualScroll where I’m specifying approxItemHeight:

<ion-list [virtualScroll]="myArray" [approxItemHeight]="'320px'">
    <ion-item *virtualItem="let myItem"></ion-item>
</ion-list>

The approxItemHeight value seems to be ignored when ionic creates the list.

Here’s the ion-list element on page load:

<ion-list class="list list-ios virtual-scroll" ng-reflect-virtual-scroll="[object Object],[object Object" ng-reflect-approx-item-height="320px" style="height: 89px;">

The style of the whole list is specified as 89px, even though I specified approxItemHeight to be 320px.

Here’s the first ion-item element in the list on page load:

<ion-item class="item item-block item-ios virtual-position" aria-posinset="2" aria-setsize="2" style="transform: translate3d(0px, 44px, 0px);">

After scrolling the list its height is properly calculated, though this is no longer the result of the initial calculation using approx dimensions, at this point the elements have already been initialized and everything is calculated according to their actual rendered size.

The only solution I found so far is to define min-height for the list element via css, though I’m not sure if it’s a proper solution and whether or not it’ll result in problems in the future.

Can you please help me understand what’s going on?

1 Like