How to create a responsive ion-item inside an ion-list virtualScroll?


#1

I have a virtual scroll using ion-list and ion-item in my Ionic 3 app.

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

ion-item’s dimensions need to be a % (percentage) of the device’s view port.

I’m specifying the dimensions of elements nested inside ion-item in % via css in order to make them responsive on all devices.

The problem is, I also need to specify approxItemWidth and approxItemHeight in %, but they can only be specified in px.

How do I solve this issue and make a virtualScroll responsive?

I thought about detecting the screen width and height via javascript and translating the % into px myself for approxItemWidth and approxItemHeight, but since this kind of solution seems pretty easy to implement it makes me wonder if there’s a reason this is not possible by design?

Ionic is a mobile framework so the team behind it must have taken responsiveness into consideration when creating virtualList.

What am I missing?


#2

Does anyone have any idea?