Issues controlling the height and width of data grids created by code

Anvil Q&A
1

I have an app where you can cluster interviewees according to whether they agree or disagree with certain statements. We will display 3, 4 or 5 clusters for the user to choose from.

The statements run down the first column, whereas the interviewees in the cluster make up the subsequent columns, and their responses are coded in the cells.

What would be perfect would be for each data grid to align - so the row for statement 1 in grid 1 will align horizontally with the same statement in grid 2-5.

Given the grids are populated dynamically and we have no way of knowing how many interviewees go in each one, I have tried to add 5 grids to a flow panel (I believe these will scroll on the x-axis), and allow them to expand.

The problem with this approach is that all data grids are equally sized - so a cluster with 1 interviewee in occupies the same width of real estate on screen as one with 5. This then “bunches up” the more populated data grid and sends the rows out of alignment between different grids.

Ideally, we would have one container (a flow panel or similar) that can infinitely scroll along the x-axis to house as many data grids with as many rows in as they need. Within each data grid, we would only occupy as much width as is required for the number of columns that are present - so a grid with 4 interviewees would be 2x as wide as one with 2 interviewees, for example.

I have tried adding css classes and tagging the elements with different roles, but this doesn’t do anything (as far as I can tell) as it’s presumably being overridden by another setting I’ve added:

/* This is the new 'role' class'. Any component 
with the role "horizontal-scroll" will get this class */
.anvil-role-horizontal-scroll {
  overflow-x:auto;
  border-radius: 12px;
  background-color: %color:Surface%;
  border: solid 1px %color:Outline%;
  padding: 15px;
} 

.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;
}

Here’s a copy of my app to show how this works and looks - you can change the clustering by clicking the radio buttons: Anvil | Login

How can I create space that will scroll horizontally (to prevent the bunching), and put data grids inside it that take up only the space they need (not some arbitrary proportion of the available real estate)?

2

scrolling on column panels is tricky
I’d consider replacing your cards with Linear Panels.
These are much simpler and so scrolling will work better.

Also something probably needs a width somewhere

Here’s a proof of concept:

3

Thanks, Stu - is there a way to get those linear panels to stay on one row? i.e. if I have 5 of them, they never overflow to the row below and the user can scroll along the x-axis?

i.e. using the same style I had on my example, where all 3, 4 or 5 linear panels are aligned on the x-axis, and the user can then scroll inside the linear panels as well as across the flow panel so they can see clusters that are “out of view” to begin with?

4

sure just add a role to the flow panel with css like

.anvil-role-flow-scroll > .flow-panel-gutter {
    flex-wrap: nowrap;
    overflow-x: scroll;
}
5

Awesome - thanks - technically the right answer is a combination of these approaches, but I chose this one.

1 Like