Sections - Customize horizontal gap size

Feature Requests
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:

23

Could you tell me where do we add this?

24

To adjust the ha-view-sections-column-gap setting, you need to create a new custom theme in Home Assistant. Follow these steps:

  1. Open your configuration.yaml file.
  2. Add a new theme under the frontend section.
  3. Reload your YAML configuration to apply the changes.
  4. Apply the new theme on your dashboard.

Here’s an example configuration:

# Load frontend themes from the themes folder
frontend:
    themes:
        MySection:
            ha-view-sections-column-gap: 8px

For more information about Home Assistant theme configuration, refer to the official documentation.

1 Like
25

Yes, this removes the gap betweenthe sections (after selecting the theme).

But this also remove the defautl Home Assistant theme and thus the ability to select Dark mode:

image
image732×484 25.8 KB

image
image726×413 21.9 KB

How to solve that?