lovelace-layout-card icon indicating copy to clipboard operation
lovelace-layout-card copied to clipboard

Needless scrollbar in vertical layout

Open DuckyCrayfish opened this issue 2 years ago • 5 comments

My Home Assistant version: 2022.3.7
Layout-card version: 2.4.2

What I am doing:

Using the vertical layout in a dashboard forces the dashboard to have some scrollable space, even if the layout itself is smaller than the vertical height of the window. I have narrowed the issue down to this CSS style:

https://github.com/thomasloven/lovelace-layout-card/blob/466df9cb051033881106dfb9029672ac7ea2a2c3/src/layouts/base-column-layout.ts#L230

Disabling this style in Chrome Inspector fixes this issue.

Minimal steps to reproduce:

  • Create new dashboard
  • Add a card
  • Set dashboard to a column layout from this plugin
  • Take note of needless scrollbar

By putting an X in the boxes ([X]) below, I indicate that I:

  • [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
  • [x] Have made sure I am using the latest version of the plugin.
  • [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
  • [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

DuckyCrayfish avatar Apr 03 '22 03:04 DuckyCrayfish

Can confirm I have this as well. Very annoying on as I'm using this on my smart mirror so it's extra distracting.

Aasikki avatar Jun 29 '22 11:06 Aasikki

Any quick fixes for this? Also annoying the cr@p out of me.

DirtyOptics avatar Jul 10 '22 15:07 DirtyOptics

I think I just got the quick fix!

As @DuckyCrayfish points out, the height is defaulting to 100% when it should be defaulting to auto. The layout configs should be able to override this though, here is my config (note I am using horizontal layout):

type: custom:horizontal-layout
layout:
  height: auto

Edit: @deeeblack and @Aasikki heads up, please give this a try if you need a quick fix!

casewalker avatar Oct 21 '22 01:10 casewalker

Ohh that's wonderful, I hadn't realized that the height attribute is customizable in yaml. Thanks a ton.

DuckyCrayfish avatar Oct 21 '22 18:10 DuckyCrayfish

i just randomly experienced this issue when i had not had it before. this happened when i was editing the options for a completely different view, also using the layout card. i...was ready to say that this cause caused by the columns element, as i had noticed a height of 1 less than the parent, yet margins of 3px, causing the overflow, yet not looking at it again, I no longer see that, and am unsure what is causing this or honestly really what is going on at all

jack5mikemotown avatar Apr 29 '23 22:04 jack5mikemotown