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;
}

9 Likes

Where do you put the code?

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

1 Like

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.

2 Likes

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.

3 Likes

Correct.

3 Likes

:+1: Thanks @ThinhDinh

1 Like

Hi,

I tried to change the mentioned CSS to have only the first item of the inline list have a different text-color, but it doesn’t work with this code:

[data-test="app-vertical-list"] :nth-child(1) :nth-child(odd) {
color:#a9a9a9;
}

(I want the first titel + first item in gray; all the other items in black)

I have to assume you’re using white text, else it will be unreadable.

<pre><span><style>

[data-test="app-vertical-list"] div[role="row"] {
background: #a9a9a9;
}

[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] {
background: black;
}

[data-test="list-item"] .textStyle {
color: white !important;
}

The trick here is first applying gray to all items, then re-do black for all items after the first one.

2 Likes

Thanks for the suggestion and I tried to adapt it, as I want :

  • white (= default) background for all items; so I don’t think I have to add it in CSS
  • black text-color for first title and first detail-text and gray text-color for all the other titles and details.

I tried to change background: #a9a9a9; to color: #a9a9a9;, but without success…

<pre><span><style>

[data-test="app-vertical-list"] div[role="row"] .textStyle {
color: black;
}

[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] .textStyle {
color: #a9a9a9;
}

[data-test="app-vertical-list"] div[role="row"] .textDetailStyle {
color: black;
}

[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] .textDetailStyle {
color: #a9a9a9;
}
2 Likes

Thanks a lot; that was the CSS I wanted !! :+1:

1 Like