Sections - Customize horizontal gap size

[pkilla]

whats the parameter for vertical gaps?

[Sireone]

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

[wheindl (Walter H.)]

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?

[DominikW (Dominik Wrobel)]

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.

[bakernigel]

This worked perfectly. Many Thanks.

[BorgTenOfNine]

@Chaoscontrol

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

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

[Chaoscontrol]

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.

[BorgTenOfNine]

Does this still work for you with 2024.10?

[Chaoscontrol]

It does, yes.

[BorgTenOfNine]

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

[btc828 (Bryan)]

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

[Protoncek (Pavel)]

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

[BorgTenOfNine]

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.

[jugulator]

Could you tell me where do we add this?

[TheBigNeo]

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.

[sender]

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:

How to solve that?

[sammyke007 (Sammy Verdonck)]

Genius, tnx!!!

[sammyke007 (Sammy Verdonck)]

Don’t change the theme systemwide, change it per view:

[sender]

Very Good!

[A_Jey]

You may wanna vote for it here:

WTH I need to install a theme to change the ha-view-sections-column-gap

The column gap of the new sections layout shouldn’t be only changeable through the yaml of a theme. Please transfer it to the view-settings of a tab with sections-layout. Alternatively transfer it to the yaml of this view. Advantage: the column-gap can be changed on standard theme which I would expect as normal.