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;
}
10 Likes
Where do you put the code?
In a rich text component on a details screen that contains the inline list component.
2 Likes
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
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 Like
Hi,
in my app (= Glide Apps), I used your css with little adaption (see below), but this seems not working anymore (since Glide changed some CSS-settings). Thatâs a while, but I didnât find the time to work on my app. Until nowâŚ
How can I set the correct settings ?
[data-test="app-vertical-list"] div[role="row"] .textStyle {
color: black;
}
[data-test="app-vertical-list"] div[role="row"] .textDetailStyle {
color: black;
}
[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] .textStyle {
color: gray !important;
background-color: #f4f0ec !important;
font-weight: 400 !important;
}
[data-test="app-vertical-list"] div[role="row"] ~ div[role="row"] .textDetailStyle {
color: #d3d3d3;
}
Wim
Please try this.
<pre><span><style>
[data-test="app-vertical-list"] [data-index="0"] [data-test="list-item-title"] {
color: red;
}
[data-test="app-vertical-list"] [data-index="0"] [data-test="list-item-subtitle"] {
color: red;
}
works fine; and with your help, I changed the code a little to have my âoldâ black / gray colors for the subtitle (and changed the font-size for the first message).
[data-test="app-vertical-list"] [data-test="list-item-subtitle"] {
color: #c3c3c3;
}
[data-test="app-vertical-list"] [data-index="0"] [data-test="list-item-subtitle"] {
color: black;
font-size: 0.85rem
}
1 Like