Sections - Customize horizontal gap size

Hi,

I think the Sections feature introduced in 2024.3 is great; I’d love to migrate all my cards over to it. However, one thing that’s bugging me is that the horizontal gap between cards seems to be hard-coded at 32px, much wider than the vertical spacing. I find the equal spacing between classic dashboard cards to be much more aesthetically pleasing.

In a future version can we please have the ability to adjust this? I tried my hand at fixing it myself by adding some css to the theme, but had no luck in banishing the gap. Thanks!

This would be great!

1 Like

We absolutely need this! Simple thing it would seem, to be able to adjust the gap width? Currently I can’t use the new sections layout because I like to include a lot of information, especially in my Home dashboard page. Sections, with these gaps, waste too much valuable real-estate!

1 Like

Voted.

If you’re interested, you can do this tweak yourself in your theme by adding:
ha-view-sections-column-gap: 10px

3 Likes

Although sections view is a great addition to HA, it’s currently only partly usable, since it misses some basic settings - in fact, it doesn’t have any settings beside number of columns. One of important ones is the lack of choosing width of each column. I have quite some views similar to sections, but not one of them has all columns of the same width, so new “sections” view is still a no-go for me for now. I bet (hope) that this will be added in the future; that’s why it’s still called “experimental”, i guess.

where do I add this?

NVM, found it. I was using the default sheme so had no idea, but when I use a custom theme, i just add the line to it , and it worked. Thanks!

Thank you @Chaoscontrol . That worked perfectly.

whats the parameter for vertical gaps?

Exactly where is this code added? I’m not using any themes.

This takes care of the vertical gap between cards; but not the excessive width at the left and right margin of the dashboard. The result is to shrink the columns, which, in my layout, causes some of the text and information in the card to be truncated.
I don’t mind working within a theme; is there a theme variable that will shrink/modify the width of columns in the layout, or shrink the left and right margins?

I’ve been trying to find a solution for this, and I think I have, The first screen shot is for no theme:

Second one is with this theme:

ImprovedSections:
  ha-view-sections-column-gap: 8px

And the last one is with this one:

ImprovedSections:
  ha-view-sections-column-gap: 8px
  ha-view-sections-column-min-width: 430px

Adjust the min-width to your screen, this may mass up the view on other devices, but I make my dashboard for a specific devica, so this is for PC, for tablet and phones I use different dashboards.

1 Like

This worked perfectly. Many Thanks.

This doesn’t seem to work anymore with Home Assistant 2024.10 beta. Can anyone confirm?

Haven’t tested the beta, but it’s working fine for me on 2024.9. Will wait for the stable release to try a solution if so.

1 Like