No top or side margins

[liamstears]

After upgrading to core 0.116.2 I seem to have lost the margins at the top and sides. Can this be fixed? Or is there a quick fix I can implement?

[rainer-geiger]

I can confirm this. Lovelace pages now have horizontal scroll bars because of missing margins. This looks really unpleasant on my wall mounted tab. I had to zoom out to 95% to avoid those. Hope this gets fixed :)

[Duke-Box]

I too have noticed similar.
In my case I have horizontal scroll bar and an intermittent vertical scroll bar which makes the view wobble every few seconds or so which makes the views difficult to use. This is most visible on my grid views and maximising the browser doesn't solve the issue neither does zooming out. I went from HA v0.114.x to 0.116.2 so do not know if this was an issue with 0.115 though

[crackers8199]

changing the padding from 0 to something like 5px works for adding the margins back in, but then causes issues with having nested layout-cards. is there a way to get the padding to only apply to the outermost card? i'm not super well versed in shadow DOMs...

[mneuron]

If you change the margins to 0px in:
#columns { display: flex; flex-direction: row; justify-content: center; margin-top: -8px; }
.column:first-child { margin-left: -4px; }
.column:last-child { margin-right: -4px; }
there should be no scroll bars

[ntompson]

I have the same problem. No margins top or sides. I also find that changing margins as described by @mneuron doesn't help for me - I can change the margins to practically anything (eg 40px) and nothing happens. So perhaps the issue (for me at least) is that the CSS adjustments are not getting through.

[rainer-geiger]

After trying a few things, I found a viable solution as a workaround until hopefully the actual error is fixed:

1.) Install card-mod from HACS
2.) Create or use any custom-theme and add the following to the theme's yaml file, replace YOUR-THEME with the actual name of the theme used:

  card-mod-theme: YOUR-THEME
  card-mod-root: |
    hui-panel-view {
        padding-top: 7px;
        padding-left: 8px;
        padding-right: 8px;
        height: calc(100% - 7px)
    }
    app-drawer-layout {
        overflow: hidden;
    }

3.) Adjust the paddings from hui-panel-view according to your own needs, these settings worked for me. Scrollbars, jumping pages and overflows are gone.

[liamstears]

After trying a few things, I found a viable solution as a workaround until hopefully the actual error is fixed:

1.) Install card-mod from HACS
2.) Create or use any custom-theme and add the following to the theme's yaml file, replace YOUR-THEME with the actual name of the theme used:

  card-mod-theme: YOUR-THEME
  card-mod-root: |
    hui-panel-view {
        padding-top: 7px;
        padding-left: 8px;
        padding-right: 8px;
        height: calc(100% - 7px)
    }
    app-drawer-layout {
        overflow: hidden;
    }

3.) Adjust the paddings from hui-panel-view according to your own needs, these settings worked for me. Scrollbars, jumping pages and overflows are gone.

Thank you very much for this reply, this really is a viable solution until this is fixed, thank you!

For my setup though I found I had to tweak it slightly as the width was not right and I had to scroll to the right on my tablet so adding the same calculation for width fixed this for me:

  card-mod-theme: YOUR-THEME
  card-mod-root: |
    hui-panel-view {
        padding-top: 7px;
        padding-left: 8px;
        padding-right: 8px;
        height: calc(100% - 7px)
    }
        width: calc(100% - 16px)
    }
    app-drawer-layout {
        overflow: hidden;
    }

[thomasloven]

This should be fixed with 2.0.0.
Please confirm.

[Duke-Box]

Sorry I can't confirm because I only had this issue with your experimental grid option.
I solved my problem by using only a vertical stack with horizontal stacks embedded within the layout card.

As far as I was concerned this was only a problem with the Grid layout.

Your contribution and support is greatly appreciated. Thanks

[ntompson]

I have just updated to 2.2.0, and still no top or side margins for me. I also note that some of the attribute names have changed, but they names don't work for me. So now I'm wondering whether something is broken...

[Phontana]

Same here, I updated to 2.2.0 and no changes to the margins. There are still no margins visible.

And as @ntompson mentioned, the layout -> view_layout change doesn't work for me either.

[ntompson]

OK. Good news at last. Turns out I had to "Reset frontend cache" for Safari based apps (macOS app, iOS app). After doing that, it takes the new attribute names... and the side margins are fixed!

[Phontana]

I can confirm that resetting the frontent cache does fix the issue. It works for me as well now.