View Full Version : horizontal scroll bar for grid with dynamic number of columns

16 Jul 2015, 12:24 PM

I have a grid with dynamic number of columns. There can be up to 35 columns. Each column is configured with "flex":1. From what I understand, flex "force fits" all the child items (columns) into the available width of their parent container (grid). So regardless of there being 1 column or 35 columns, they will take up all the space avaialble in the grid, nothing more or less. Thus, a horizontal bar will never be shown.

The issue is with lots of columns it becomes hard to read the headers since all columns are crammed into the available width.

So I instead replaced "flex" with "width". This works fine so as long as there are enough columns. If the columns are too few, they dont take up all the space of the grid leaving the rest of the grid transparent.

So what would be the best way to handle this? Basically, I need to use width when there are a lot of columns and flex when only a few columns.

Are there any alternatives to showing horizontal scrolll bar besides replacing flex with width?


16 Jul 2015, 1:01 PM
You can simple have flex on one of the columns, or the last column to fill the gap?

16 Jul 2015, 3:32 PM
Brilliant! thanks Scott!