Alternate colour for inline lists rows

Anyone has the CSS for alternate colours for inline list rows?
Help appreciated!

A little messy, but this works for an inline list:

<pre><span><style>
[data-test="app-vertical-list"] :nth-child(2) :nth-child(even) {
background-color: #b1e4fb;
}

.textContainer,[data-test="list-item-title"],[data-test="list-item-subtitle"] {
background-color: transparent !important;
}

7 Likes

Where do you put the code?

In a rich text component on a details screen that contains the inline list component.

Thanks @Robert_Petitto ! It works well!

Can you help me with understanding the syntax a bit more…

What do the following stand for?

  • [data-test=“app-vertical-list”]
  • [data-test=“list-item-title”]
    *[data-test=“list-item-subtitle”]

Thank you.
I had the correct set-up but it was not working. I was using “show items”. I had it set to 1 and tried to open it. It works without “show items” or have “show items” set to more than 1 - when you open “all” , it does not work.

I believe this stands for the whole list that contains all items you want to show.

These are for the titles and subtitles of each item. I think it has to be transparent to be visible in this setting.

1 Like

This trick won’t work for the ‘Show All’ view because that view is a list style view and you can’t add additional components, like the Rich Text component with the CSS “hack” to override Glide’s default settings. I don’t think there is much you can do until Glide gives us native abilities. These CSS “hacks” are only going to work on the current screen where you apply the Rich Text component.

2 Likes

Correct.

2 Likes

:+1: Thanks @ThinhDinh

1 Like