CSS repeating panel n-th object color

Anvil Q&A
1

What I’m trying to do:
I want to change the color of every 2nd row of the repeating panel

What I’ve tried and what’s not working:
I think there is something missing after .repeating-panel to change the color. Studying html don’t help because I can’t find it. Does the panel has some other object than need to be targeted with CSS?

Code Sample:

.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div:nth-of-type(even) {
  background-color: %color:rows_tables% !important;
}

Clone link:
share a copy of your app

2

Here’s the CSS I use in a similar role (I can’t take credit for it, @stucork provided it in response to a similar question years ago):

.anvil-role-striped .anvil-data-row-panel:nth-child(even) {
    background: #EEEEEE;
}
3 Likes
3

Thanks for the linking the topic to me. I was looking for the syntax to get to the end.
In my code one > div > was still missing. I missed that

.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:nth-of-type(even) {
  background-color: %color:rows_tables% !important;
}

in my case I have to watch out. I’m using DataRowPanel already as header and need to style it one by one to avoid overwriting.

1 Like