CODEWITHSUNDEEP
javascriptionic-frameworkionic2ionic3
Royi Bernthal
Royi Bernthal

Reputation: 482

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

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?

Upvotes: 0

Views: 770

Answers (1)

Tomislav Stankovic
Tomislav Stankovic

Reputation: 3126

approxItemWidth can be specified either px or % units.

The approximate width of each item template's cell. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This value can use either px or % units. Note that the actual rendered size of each cell comes from the app's CSS, whereas this approximation is used to help calculate initial dimensions before the item has been rendered. Default is 100%. - source

As for approxItemHeight you can try this: [style.height]="myItemHeight" where myItemHeight is set by your component this.myItemHeight = ... + "px";

Upvotes: 0

Related Questions