Fixing vertical scrollbar in visible area CSS

Anvil Q&A
1

What I’m trying to do:
I made some changes to the data grid CSS to create a vertical and horizontal scroll.
Horizontal scroll moves data row panel with header and repeating panel and the vertical scroll only repeating panel rows.

I want to fix the vertical bar in the visible are of the data grid not at the end of the horizontal bar. It should hover over the repeating panel. Now you need to scroll horizontally in order to see it. Like on the picture.

Unbenannt2
Unbenannt22889×849 117 KB

What I’ve tried and what’s not working:
plenty of methods to style it with webkit or pseudo CSS classes…

Code Sample:
code that fix the scrollbars like intended:

/* Data Grids */
/*styles data-row-panel containing header row to be single row only and add a bar*/
.anvil-role-tonal-data-grid .anvil-data-row-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: min-content;
  overflow-x: hidden;
}

/*styles repeating panel to be single row only and add a bar*/
.anvil-role-tonal-data-grid .repeating-panel {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-x: hidden;
  min-width: min-content;
  overflow-y: scroll;/*add vetical bar*/
  max-height: 450px;/*max height*/
}

.anvil-role-tonal-data-grid .data-grid-child-panel {
  overflow-x: auto !important;
}
2

Moved the vertical scrollbar and height limitation to the .data-grid-child-panel.
Fixed the .anvil-data-row-panel working as header to the top and assigned z-index to repeating panel and .anvil-data-row-panel to force the header to stay always above scrolled area of repeating panel.

Unbenannt
Unbenannt1465×495 56 KB

To build it:

  1. Add DataGrid
  2. remove auto header row
  3. Add DataRowPanel as a new header row and pin it
  4. paste the code into theme.css
  5. add a new role .anvil-role-tonal-data-grid
  6. apply it on your data grid.
  7. every color written like that %color:rows_tables% has to be changed by some hex/rgb value or you need to add a color scheme named like that “rows_tables” etc.

I’m not using the standard text for headers and rows. Every single text what you see is a component like text box with data binding. You can use the text, but don’t forget to format it with CSS.
Headers footer and page buttons are too some components with a code running the functions behind it.

/*styles data-row-panel containing header row to be single row only and add a bar*/
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .anvil-data-row-panel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: min-content;
  overflow-x: hidden;
  position: sticky;/*by setting it it will get stick to the top and it hoovers over the scrolled page as header*/
  top: 0;
  z-index: 1;/*forces to be always at the top to cover the scrolled rows of 2nd container*/
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border-right: 1px solid %color: table_borders%;
  border-bottom: 1px solid %color: table_borders%;
  border-radius: 14px 14px 0 0;
  background: radial-gradient(%color:Header%, %color:Header3d%);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}

.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:first-child {
  border-radius: 4px 0px 0px 0px;
}

.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:last-child {
  border-radius: 0px 4px 0px 0px;
}
/*Line at the end of the repeating panel, atm it's green*/
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel > div > div:last-of-type {
  border-bottom: 2px solid #009879;
}
/*color style for the odd rows of repeating panel*/
.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;
}

/*styles repeating panel to be single row only and add a bar*/
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel > .repeating-panel {
  overflow-x: hidden;
  min-width: min-content;
  position: relative;
  z-index: 0; /* lower z-index than anvil-data-row-panel */
}
/*overwrites standard settings for repeating panel no wrap*/
.anvil-role-tonal-data-grid.anvil-data-grid  .anvil-data-row-panel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
}
/*scrollbars*/
.anvil-role-tonal-data-grid.anvil-data-grid .data-grid-child-panel {
  overflow-x: auto !important;
  overflow-y: auto;/*add vetical bar*/
  max-height: 450px;
}
1 Like
3

So, how would we apply this information?

In my own CSS, I did not find “data-grid” anywhere, so I am guessing that these are entirely new CSS entries, not adjustments to existing entries.

So we would add them to our existing “standard” CSS in theme.css?

And then give the Data Grid the custom role tonal-data-grid?

4

This is specific to Material Design 3 …

5

I’m using Material Design 3 as the base. You can do it on your own too.
It set to work with a data grid containing DataRowPanel as header at the top, repeating Panel in the middle and footer at bottom.

In my case I removed .anvil-role-tonal-data-grid completely. There is no single line left, only the name is left.

You can put it in your theme.css and add the new role that you apply on your data grid component.
I still want to make some styling changes to it and edit maximal height to view point calculated height. Now it’s only how you can apply scrollbars and not styles at all. Watch out by styling it. It’s easy to overwrite the rules for expanding beyond the view area

6

Ah, thank you. My app pre-dates Material Design 3, so it doesn’t apply directly. Detailed understanding of CSS, especially as it applies to Material Design 3, will be needed, before I can abstract out the underlying ideas for use in my app. That would be the topic of a different post, anyway.

Others will find it much more useful! Thanks again.