Alternate row colors & add timestamp on check event

Anvil Q&A
18

For more information on how to add a role for striped Repeating Panels. I figured out how to make this work in both the designer and while running. First, I made a role just for Data Grids and another just for Repeating Panels. Second, I added some JavaScript to the HTML to add one of two classes to the body depending on whether it was in designer mode or not.

Here is the HTML:

<script>
  if (document.querySelector('.designer')) {
      document.querySelector('body').classList.add('in-designer');
  } else {
      document.querySelector('body').classList.add('not-in-designer');
  }
</script>

Here is the CSS:

/* ##### STRIPPED REPEATING PANEL ##### */
.anvil-role-striped-dg .anvil-data-row-panel:nth-child(even) {
  background: var(--primary-overlay-3);
}

body.in-designer .anvil-role-striped-rp > div:nth-child(even) {
  background: var(--primary-overlay-3);
}

body.not-in-designer .anvil-role-striped-rp > div > div:nth-child(even) {
  background: var(--primary-overlay-3);
}

Note: don’t forget to create the respective Roles.

Also, this technique could be used to apply separate CSS for anything you like.

1 Like