Sections and widths... not understanding them

Configuration Frontend
1

So I’ve created a sections dashboard page, and set the width to 9.
I then created 2 sections, section A, with a width of 5 and section B, with a width of 4 (all within the GUI)

My expectation was that I would end up with 2 sections on the same row, with section A slightly larger than section B. (5/9 v. 4/9)

Basically, I was assuming that the width field was a column_span (which is what it seems to be marked as in the yaml)

What I found was that section A pushed section B onto the next line…

in playing with it, it appears that the width field only really seems to count up to 5, with 5 being full width, and anything lower being about 1/5 of the screen.

Am I missing something?

2

There are limits to how many sections can be displayed in a single row based on available screen area. In your case if you have 9 sections of cards at 12 columns per card it would become unreadable on most screens, so the rendering engine will pop the second section down to try and keep it readable.

There are some theme variables that you can set in a theme to reduce the amount of space actually used by each section and the padding between them to help get around this. You can then set that theme for the dashboard in question. This is a theme that I use to keep a 5 section wide dashboard (3 sections and 2 sections split) on the same row for a 1340 wide tablet.

stephard-view-1340x800-3and2:
  ha-view-sections-column-max-width: 300px #default 500px
  ha-view-sections-column-min-width: 200px #default 320px
  ha-view-sections-column-gap: 16px #default 32px
  ha-view-sections-row-gap: 8px
  ha-section-grid-column-gap: 8px
  ha-section-grid-row-gap: 4px #default 8px
3

Hm, OK, I wasnt though trying to actually display 9 cards, I was trying to control the width of the 2 cards that I was actually displaying.

So, what then is the “width” variable for in the section config? (called “column_span” in the yaml view)?

As far as I can tell, it’s not documented anywhere (which probably means that I just missed it)

4

The column_span dictates the number of columns a ‘section’ occupies. So a column_span of 5 from your 9 means your next section only has 4 left to use, HA front end will try to render both sections on the same ‘line’. However if your screen is too small to handle the full 9 columns between 2 sections it will drop the second section below the first. Then as the screen’s width real estate shrinks the cards within your 5 column wide section will pop below the previous one to remain legible.

The behaviour of columns, sections, and cards popping below have a preset minimum and maximum threshold size set with css variables, these can be overridden with a custom theme as I indicated above.

My advice, and my personal practice, is to create display specific dashboard views based on the screen size you will be seeing that dashboard view on with a theme applied that sanely changes it’s display limits.