Hi everyone, is there any way to get rid of gaps between sections ?
Thanks!
check this:
# https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/views/hui-sections-view.ts
ha-view-sections-row-gap: 4px #default 8px
ha-view-sections-column-gap: 8px #default 32px
# ha-section-grid-row-gap: 8px #default
ha-section-grid-column-gap: 0px
set these variables in your themes
uff 
I’m sorry but I have no idea what to do with this. Isn’t there a simpler instruction somewhere?
Yes, in the documentation. Home Assistant frontend - Home Assistant
in that case, well, in any case, do what Tom says, read the documentation.
If you have no idea what this means, than you really shouldn’t bother customizing, as that requires some serious understanding how HA frontend works.
First, understand what a Theme is and does, next you can try and modify the default theme.
There is no other way,
One possible method is to use Mushroom title card in a section. This gives a good result and eliminates unnecessary spaces.
Are you using the new Sections view type? Or are your screenshots from Masonry? I’m seeing the same issue as @Mirro66 in that the height of a row is set to the height of the highest card - and cards don’t collapse where they can to fit. For example, it looks like either Office could fit under Tech, or Hallway could fit under Office.
Everything looks good at mobile viewports (since there’s only one column), but I’m not seeing a way to create a good looking dashboard at desktop-width viewports.
For example, in this case it would work much better if Outside went under Basement, so then the “lights on” auto-entity card would have more height to work with.
Can you please elaborate ? because you just dropped this like everybody knows what going on and how to achieve this.
I can assist if you describe what you are trying to achieve.
Simply want to have sections that don’t have margin between top and bottom. For example if I have multiple sections, tops are always kept at the same height.
You can put all cards in one vertical section inserting blank header cards to have some seperation.
I therefore have only two or three sections each page subject to how much I want to show.
Or you can adjust the Section’s --column-gap: and --row-gap: with:
- Theme settings
- A custom CSS js file
" Theme settings" can you elaborate on that please ?
In regards of putting everything in one big section - this is something I’m not fond off, since I want some views to have even 8 columns on super wide displays, but 2-3 on smaller screens. It’s hard to keep all the sections the same size, so when all of the allign their tops in the row to the same position, it wastes a lot of space.
suppose there is a misunderstanding of the word gap here…
sorry, but in my earlier answer I thought OP meant the gap between cards in a view. Which is a system term referencing those 8px, or 24px space around cards etc. Hence my suggestion to set that in themes.
Right now, I believe you are referencing the empty space in columns that are left because of HA’s algorithm how to place cards a view. Those are not the ‘gap’ from above. Title of this topic should probably be adjusted.
for long, (when masonry was the default layout) you needed custom:layout-card to precisely position cards and offer enormous configurability. I suppose people still use that, even while Sections is the default. Did you check that?
1 Like
Guys, me and OP are refering to that:
Show a screenshot in edit mode please.
ok, here are few examples. I don’t have a perfect example of how annoying it is because I was avoiding that layout … but here we go.
yup
BTW, I think second screenshot demonstrates it better.