[Solved] Beta11: VirtualScroll - approxItemHeight - Throwing error

The following code works fine:

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

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.

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

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

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:


or if the height must be set dynamically:


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

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