horizontal-layout: unneeded scrollbar

[ildar170975]

My Home Assistant version: 2023.11.2

Layout-card version (FROM BROWSER CONSOLE): 2.4.4

What I am doing: Consider this code:

title: test-6
path: test-6
cards:
  - &ref_card
    type: entities
    entities:
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
  - *ref_card
  - *ref_card
  - *ref_card

which gives us this:

Now let's add a horizontal layout:

title: test-6
path: test-6
type: custom:horizontal-layout
cards:
  ...

I see an unneeded scrollbar on the right:

What I expected to happen: A scrollbar here is not needed - so it is not supposed to be shown.

What happened instead: A scrollbar is displayed.

Error messages from the browser console: none

---

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.

[ildar170975]

Same with vertical-layout:

title: test-6
path: test-6
type: custom:vertical-layout
cards:
  - &ref_card
    type: entities
    entities:
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
      - sun.sun
  - type: custom:layout-break
  - *ref_card
  - type: custom:layout-break
  - *ref_card
  - type: custom:layout-break
  - *ref_card

[ildar170975]

Managed to get rid of the scrollbar:

Not sure but may be a code is here: https://github.com/thomasloven/lovelace-layout-card/blob/b63bf93daf166609ededbafc7b31a6e5d88037c3/src/layouts/base-column-layout.ts#L100

[thomaswwp]

I too have this issue which ruins the look of my kiosk panel. I am not experienced enough how to take what you have said above and make the same change. :(

[Tratos-1]

The same issue here. This helped me in the configuration yaml.

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

[ildar170975]

helped me

Confirmed.

[travisterrell]

The same issue here. This helped me in the configuration yaml.

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

Thanks; I just threw it in the layout section for the entire dashboard. Worked like a charm.