Horizontal scrolling

Anvil Q&A
1

What I’m trying to do:
Get horizontal scrolling in a datagrid constructed with code.

What I’ve tried and what’s not working:
I tried using the tutorial here: Horizontal scroll for Data Grid
But couldn’t get it to work.

Code Sample:
Added to the css:

.anvil-role-wide .data-grid-child-panel {
  overflow-x: auto;
}

.anvil-role-wide .anvil-data-row-panel {
  flex-wrap: nowrap;
  min-width: -moz-min-content;
  min-width: min-content;
}

Clone link:

2

That’s what I use in Material Design 3 with Tonal Grid

/* DataGrid Horizontal Scroll */
.anvil-role-horizontal-scroll {
  overflow: hidden; /* Fix background of auto-header when it's rounded (tonal-grid) */
}
.anvil-role-horizontal-scroll .data-grid-child-panel {
  overflow-x: auto;
}

.anvil-role-horizontal-scroll .anvil-data-row-panel {
  flex-wrap: nowrap;
  width: fit-content; /* Fix background*/
}
3

I tried putting this into my theme.css file, and adding a “horizontal-scroll” roll, but still didn’t get horizontal scrolling. Could you get it to work in my toy example?

4

Yes, it worked, but there’s a few things you need to do extra or forgot to do.

  • On Form1:42, you forgot to change the role to horizontal-scroll.
  • On Form1:32 you should specify the minimum width for the column. You could also allow it to expand so if you want that behaviour. The line would look like (29 to 33):
# define grid columns
    columns = []
    for i, header in enumerate(headers):
      columns += [{ "id": f"{i}", "title": f"{header}", "data_key": f"{header}", "width": 100, "expand": True }]
    grid.columns = columns[:]

That worked perfecly for me.

1 Like
5

Amazing, that worked, thank you so much!

1 Like