I am revisiting the Virtual scroll in Ionic 4, to see if I can now get it to do what I have always been after.
I have a list (which can be very large, depending on server data), so I want it to be virtual. Also, on larger screens, I would like to display 2 (or perhaps 3) items side be side, rather than a single column (which is what we want for phone size screen in portrait).
I have the following setup…
<ion-content padding>
<ion-virtual-scroll [items]="items" approxItemHeight='40px'>
<ion-item id='outer' *virtualItem="let item">
<div id='container'>
<ion-img style="margin-right:10px" [src]="item.img"></ion-img>
<div style='display:grid'>{{item.text}}</div>
</div>
</ion-item>
</ion-virtual-scroll>
</ion-content>
And in the scss…
#container{
display: grid;
grid-template-columns: 30px auto ;
grid-template-rows: 40px;
justify-items: center;
background: lightblue;
width: 100%;
}
#outer{
display :grid;
grid-template-columns: stretch ;
}
@media screen and (min-width: 800px) {
#outer{
grid-template-columns: 50% 50% ;
}
}
So I have set the #outer id to each of the ion-item, and then use the media query to adjust the widths.
I have also tried with just floats widths etc rather than css grid, but nothing seems to get them to move up so more than one on each row,
I see the widths adjusting as expected as I resize the browser window…
But my items are not wrapping.
Does anyone know if this is possible, and if so, how I can do this?
Thanks in advance!
