Datagrid not show properly on mobile device

Anvil Q&A
3

https://anvil.works/build#clone:MUOM4EIDQSZW7O2D=VHNRQNSNI5XTZC42GXOMJUKL

In the Anvil IDE, just click Assets > Choose an asset to edit > theme.ss , and add the following lines to theme.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;
}
.anvil-role-wide .anvil-panel-section-gutter {
  flex-wrap: wrap;
  min-width: -moz-min-content;
  min-width: min-content;
}

Then add the following line to your init method (on the form with the grid widget):

self.data_grid_1.role='wide'

All the other features in the grid example above require just a few lines of code. There’s a video link about this example at 5 minute CRUD video

1 Like