Unnecessary scroll bars using views with layout-cards (like "Horizontal (layout-card)"

Configuration Frontend
1

HA 2022.11.3
I always see scroll bars when using custom layout cards (on multiple devices) when the screen content doesn’t call for it. I really don’t know why. The issue disappears as soon as I set the view back to default Masonry

scroll
scroll1905×933 83.9 KB

layout card
layout card540×678 18.6 KB

Has anyone seen this or know how to solve this? I dont have anything complex in the cards, here is an example from column 1:

type: vertical-stack
view_layout:
  column: 1
cards:
  - type: gauge
    entity: input_number.heating_oil_level
    unit: '%'
    needle: true
    name: Heating Oil Level
    min: 0
    max: 100
    severity:
      green: 25
      yellow: 10
      red: 0
  - type: gauge
    entity: input_number.rainwater_level
    theme: Mushroom
    min: 0
    max: 100
    needle: false
  - type: history-graph
    entities:
      - entity: switch.two_channel_boiler_actuator
    title: Central Heating (24h)
    hours_to_show: 24
  - type: entity
    entity: sensor.immersion_relay_air_temperature
    icon: mdi:heating-coil
    name: Immersion Water Temperature
    state_color: false

The scoll bar really messes up the look on wall tablets etc

1 Like
2

Updated to 2022.11.5 today. Now i got these scrollbars too. I also use layout-card.

3

Let me know if you find a fix, i’ve ran out of things to try

4

Some findings:
if i recreate one of the pure yaml views with the visual editor, the scrollbar will not show up. but thats not feasible, because i heavily reuse yaml to show buttons in multiple views.
if there is a modal overlay showing the vertical scrollbar disappears

5

i defined 0px wide margins for the layout-card and the vertical scrollbar vanished.

 - type: custom:layout-card
    layout_type: custom:grid-layout
    view_layout:
      grid-area: content
    layout:
      margin: 0px 0px 0px 0px
      card_margin: 0px 0px 0px 0px
      grid-template-columns: auto 90px
      grid-template-rows: auto
      grid-template-areas: |
        "content sidebar"
    cards:
      - !include /config/lovelace/a.yaml
      - !include /config/lovelace/b.yaml
4 Likes