Sections - Customize horizontal gap size

Feature Requests
1

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.

sections
sections800×356 48.4 KB

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!

2

This would be great!

1 Like
3

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
4

Voted.

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

3 Likes
5

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.

6

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!

7

Thank you @Chaoscontrol . That worked perfectly.

8

whats the parameter for vertical gaps?

9

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

10

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?

11

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

theme0
theme01838×993 314 KB

Second one is with this theme:

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

theme1
theme11839×991 313 KB

And the last one is with this one:

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

theme2
theme21835×991 321 KB

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.

2 Likes
14

This worked perfectly. Many Thanks.

15

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

16

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
17

Does this still work for you with 2024.10?

18

It does, yes.

19

When I add this line to the theme I use (Material Rounded Theme), nothing changes. :thinking:

20

changing ha-view-sections-column-min-width does absolutely nothing

21

Works here in 2024.11. Try to change that to 1px. You must run “frontend.reload_themes” after each change though…

22

I figured this one out: the Material Rounded theme file consists of multiple themes. I added the CSS changes to the wrong theme. Adding it to the correct theme does wonders. :see_no_evil: