Css ":nth-child(2n+1" working randomly in virtually scrolled list

Ionic Framework ionic-v3
1

hi all,

I’m writing a (beautiful ;-)) app to manage the content of my cellar. Among features I can list the bottles in it, and because I can have quite a lot of bottles to drink (say, 1500 or so), I’m using virtual-scroll in order to get optimal performances when displaying this. So I’m using something like

    <ion-list sliding="true" class="bottle-page" [virtualScroll]="bottles" #bottleList>
      <div *virtualItem="let bottle" style="width: 100%">
        <bottle-item [bottle]="bottle" (showDetail)="triggerDetail($event)"
                     (selected)="switchSelected($event)"></bottle-item>
      </div>
    </ion-list>

I’m trying to have the “pyjama effect”, I mea rows with alternative background colors white / light grey. And that’s where I have the issue, I have sometimes several white rows, then sometimes light grey rows. When inspecting the DOM I can see that rows are not displayed in the same order as in the DOM, is it the normal behavior of the virtualScroll stuff ? OK it’s fast and that’s what I’m looking for, but the result is rather ugly on my phone…

Any idea on how to do this ?
Thanks !

2

not sure if possible, maybe using an index to apply a style?

<div *virtualItem="let bottle; let i=index;" [class.your-even-div-style]="i % 2 == 0">
3

Thanks for the suggestion, I’ll give it a try but seems to me that it’ll not work because the order of the rows in the DOM is not the order in my Array…
Will let you know, thanks anyway !

1 Like
4

No worries, I’m really not sure if that could works or not, I don’t use virtual scroll so far (waiting for Ionic 4 to give a try again)

5

This ended up working for me and displayed the rows in alternating colors.