Alternate row colors & add timestamp on check event

Anvil Q&A
10

hi @ananth.krishnamoorth,

good news, you don’t need to customize Anvil’s theme.css to achieve this if it’s something you’re not comfortable with.

You might want to do this in python and adjust @jose.manuel.ilinchet suggestion above:

Perhaps you could include an index for each item in the repeating_panel items
e.g. the items might look like

[{'name': 'John',  'i': 0},
 {'name': 'Sally', 'i': 1}, 
 {'name': 'Ben',   'i': 2}]

And your ItemTemplate might have a databinding for background or something in the init method like:

class ItemTemplate1(ItemTemplate1Template):
    def __init__(self, **properties):
        self.init_components(**properties)
        if self.item['i'] % 2:
            self.background = 'theme:Gray 200'

the databinding could be similar: 'theme:Gray 200' if self.item['i'] % 2 else ''
Screen Shot 2020-12-09 at 22.05.41


If you do want to play with CSS, something like this should work for repeating panels: 
.repeating-panel > div > div:nth-child(even) {
  background: %color:Gray 200%;
}

Be sure to check out the anvil docs if you want to learn more about including css
https://anvil.works/docs/client/themes-and-styling

2 Likes