[Solved] Beta11: VirtualScroll - approxItemHeight - Throwing error

Ionic Framework ionic-v3
1

The following code works fine:

    <ion-list [virtualScroll]="photos">
        <ion-item *virtualItem="let photo">
            <ion-img [src]="photo.path"></ion-img>
        </ion-item>
    </ion-list>

But when I add approxItemHeight as follows

    <ion-list [virtualScroll]="photos" [approxItemHeight]="80px">

I am getting this error:

browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Parser Error: Unexpected token 'px' at column 3 in [80px] in EventAlbumTabComponent@43:43 ("


        <ion-list [virtualScroll]="photos" [ERROR ->][approxItemHeight]="80px">

            <ion-item *virtualItem="let photo">
"): EventAlbumTabComponent@43:43

Removing the px as follows

    <ion-list [virtualScroll]="photos" [approxItemHeight]="80px">
throws this error

virtual-util.js:481 Uncaught TypeError: approxHeight.indexOf is not a function
calcHeight @ virtual-util.js:481
calcDimensions @ virtual-util.js:456
readDimensions @ virtual-scroll.js:368
(anonymous function) @ virtual-scroll.js:378

Please help.

2

You could write approxItemHeight="80px" (without brackets), this works for me.

3

Hi @szerjav,
Without the brackets, no errors are thrown. But the height is not increased.
No effect is shown.

4

Hi, approxItemHeight is for ionics internal calculations only (“how many items do I need to render to fill up the page” or so).

You could use standard inline CSS:

style="height:80px"

or if the height must be set dynamically:

[style.height]="myItemHeight"

where myItemHeight is set by your component ( this.myItemHeight = ... + "px"; )

5

Hi. Thanks a lot. It’s working right now :+1:
How did I missed to try out with standard CSS!