Material Design 3

Anvil Q&A
1

What I’m trying to do:
I got this off the forum awhile back for alternating row backgrounds in repeating panels

.anvil-data-row-panel:nth-child(even) {
    background:  %color:Gray 200%;;
}

What I’ve tried and what’s not working:
i’m terrible at CSS , i tried a few things similar in the M3 theme.css…

anyone figure out how to do this in M3 , thx in advance …
Code Sample:

# this is a formatted code snippet.
# paste your code between ```

Clone link:
share a copy of your app

2

Hi @jbrow57. You mention that you’ve tried ‘a few similar things’ in the M3 theme. Would it be possible for you to write down the exact code you tried? Otherwise it’s a bit hard to know what’s going wrong!

4

Hi @patricia
in the theme.css file i added

.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel .anvil-data-row-panel:nth-child(even) {
    background:  %color:Outline%;
    border-left: 0;
}

around line #1028 , this in addition to the little snippet you see above that works in any pre M3
app. That didn’t work so then i went and studied further some CSS internals , i posted another forum question regarding the meaning of “%color: Outline%” ( in the above code ). Like i stated my css
knowledge is poor , i may have tried another variation of this css code above but nothing gave me the results i was looking for so i gave up and posted this original message. My lack of knowledge is usually
quickly resolved by the awesome folks who hang out on this forum !!!

5

That actually does work, but only for Data Grids that have the tonal-data-grid role assigned to them (that’s what the .anvil-role-tonal-data-grid part of that code is doing). If you want this to be applied to all Data Grids, regardless of their role, simply remove that bit:

.anvil-data-grid .anvil-data-row-panel:nth-child(even) {
    background-color: %color:Outline%;
    border-left: 0;
}

Hope this helps! :slight_smile:

4 Likes
6

@patricia , thanks for your help , i certainly have a better grasp of anvil roles now !!
all is well

1 Like