Scrollbars and "jumping" cards after updating to 116.2

zeular commented 4 years ago

Checklist

[x] I have updated to the latest available Home Assistant version.
[x] I have cleared the cache of my browser.
[x] I have tried a different browser to see if it is related to my browser.

The problem

After updating from 116.0 to 116.2, I got scrollbars on both x & y axis. Which causes the frontend to jump back and forth. My cards are all the way to the edge of the browser, in version 116.0 it was about 5px between cards and the edge. It gets worse when I place the mouse pointer over a "mini-graph-card" but I have the same problem with scrollbars on views without a "mini-graph-card". I have plenty of empty space on the Y-axis but still get scrollbars. Have tried disabling cards and clearing cache. It is only on views with 4 columns. If I zoom out to about 75%, the problem disappears. Image: https://i.ibb.co/cvNSYXh/HA.gif

Expected behavior

No scrollbars

Steps to reproduce

I don't know.

Environment

Home Assistant release with the issue: 0.116.2
Last working Home Assistant release (if known): 0.116.0
Browser and browser version: Chrome Version 86.0.4240.75 (Officiell version) (64 bit) and Firefox 81.0.2 (64-bit)
Operating system: Windows & Linux (Rpi)

State of relevant entities

Problem-relevant configuration

I have the same problem on two different systems, I have entered all the code on the "small" system, it only consists of a "Dashboard". Maybe you can see something wrong in my code.

title: Name
background: var(--background-image)
views:
  - title: Dashboard
    icon: mdi:monitor-dashboard
    path: dashboard
    panel: true
    cards:
      - type: custom:layout-card
        layout: vertical      
        cards: 
          - type: picture-elements    
            image: /local/clock_bg_op.png
            elements:      
              - type: state-label
                entity: sensor.time
                style:
                  top: 30%
                  left: 50%
                  font-size: 5vw
                  color: white
              - type: state-label
                entity: sensor.date
                style:
                  top: 64%
                  left: 45%
                  font-size: 1.5vw
                  color: white                            
              - type: state-label
                prefix: "v."
                entity: sensor.swedish_calendar_week
                style:
                  top: 65%
                  left: 70%
                  font-size: 1.5vw
                  color: white
              - type: state-label
                prefix: "Namnsdag: "
                entity: sensor.swedish_calendar_name_day
                style:
                  top: 80%
                  left: 50%
                  font-size: 1.0vw
                  color: white 
              - type: conditional
                conditions:
                  - entity: sensor.swedish_calendar_theme_day
                    state_not: unknown
                elements:                          
                  - type: state-label
                    entity: sensor.swedish_calendar_theme_day
                    style:
                      top: 95%
                      left: 50%
                      font-size: 0.9vw
              - type: conditional
                conditions:
                  - entity: sensor.swedish_calendar_flag_day
                    state_not: unknown
                elements:                             
                  - type: state-icon
                    entity: sensor.swedish_calendar_flag_day
                    style:
                      top: 20%
                      left: 85%
                      "--paper-item-icon-color": "#f7df00" 
                      "--iron-icon-height": 40px
                      "--iron-icon-width": 40px                            

          - type: "custom:atomic-calendar"
            title: "Kalender"
            entities:
              - entity: calendar.helgdagar_i_sverige
                titleColor: "#ff471a"
              - entity: calendar.name
                titleColor: "#00cc00"
              - entity: calendar.name
                titleColor: "#0080ff"
              - entity: calendar.name
                titleColor: "#ffb3ff"
              - entity: calendar.name
                titleColor: "#FFFFFF"
            fullDayEventText: 'Hela dagen'
            untilText: '-->'
            showColors: true
            maxDaysToShow: 10
            showLocation: true
            showMonth: true
            showCurrentEventLine: false
            dateFormat: 'ddd DD MMM'
            dateColor: white
            dateSize: 90
            timeColor: '#cccccc'
            timeSize: 90
            titleColor: "#FFFFFF"
            titleSize: 100
            locationIconColor: white
            locationLinkColor: white
            locationTextSize: 90
            dimFinishedEvents: true
            finishedEventOpacity: 0.3
            finishedEventFilter: '#8c8c8c'
            dayWrapperLineColor: white
            eventBarColor: white
            showProgressBar: true
            progressBarColor: white

          - break #Kolumn 2                  
          - type: custom:weather-card
            entity: weather.smhi_visby
            icons: "/local/customcards/weather-card/icons/static/"   

          - type: iframe
            url: 'https://www.rainviewer.com/map.html?loc=57.5334,18.5229,6&oFa=0&oC=0&oU=0&oCS=0&oF=0&oAP=0&rmt=2&c=1&o=72&lm=0&th=1&sm=1&sn=1'
            aspect_ratio: 80%
            align: center

          - break #Kolumn 3                        
          - type: horizontal-stack
            cards:
              - type: custom:mini-graph-card
                name: WAN Ner
                font_size_header: 11                        
                hour24: true
                hours_to_show: 3
                points_per_hour: 30
                line_width: 7
                lower_bound: 0
                upper_bound: 110
                entities:
                  - sensor.edgeos_download 
                show:
                  extrema: true
                  icon: false                        
                  labels: false
                  name: true
                  state: true
                  graph: line
                color_thresholds:                 
                  - value: 25
                    color: "#33cc33"
                  - value: 50
                    color: "#ffff00"                      
                  - value: 70
                    color: "#ff9900"
                  - value: 90
                    color: "#ff9933"

              - type: custom:mini-graph-card
                name: WAN Upp
                group: false
                hour24: true
                hours_to_show: 3
                points_per_hour: 30
                line_width: 7
                lower_bound: 0
                upper_bound: 110
                entities:
                  - sensor.edgeos_upload                    
                show:
                  extrema: true
                  fill: fade
                  icon: false
                  labels: false
                  name: true
                  state: true
                  graph: line
                style:
                color_thresholds:                 
                  - value: 25
                    color: "#33cc33"
                  - value: 50
                    color: "#ffff00"                      
                  - value: 70
                    color: "#ff9900"
                  - value: 90
                    color: "#ff9933"

          - type: custom:list-card
            entity: sensor.nyheter
            title: Nyheter från Hela Gotland
            feed_attribute: entries
            columns:
              - title: Rubrik
                field: title
                add_link: link

          - type: entity-filter
            show_empty: false               
            state_filter:
              - not_home 
            card:
              title: Offline
              show_header_toggle: false                 
            entities:
              - entity: device_tracker.lkc
                secondary_info: last-changed
              - entity: device_tracker.kansli
                secondary_info: last-changed
              - entity: device_tracker.oa_lunch
                secondary_info: last-changed
              - entity: device_tracker.karlso_ann
                secondary_info: last-changed
              - entity: device_tracker.service_andreas
                secondary_info: last-changed

          - type: conditional
            title: SMHI Varning!
            conditions:
              - entity: sensor.smhialert
                state: 'Alert'
            card:
              type: custom:smhialert-card
              entity: sensor.smhialert
              title: SMHI Varning 

          - type: conditional
            conditions:
              - entity: sensor.krisinformation
                state: 'News'
            card:
              type: custom:krisinfo-card
              entity: sensor.krisinformation

          - break #kolumn #4
          - type: custom:vertical-stack-in-card 
            cards:
              - type: custom:mini-graph-card
                name: Påloggade WiFi
                font_size_header: 13                        
                hour24: true
                hours_to_show: 24
                points_per_hour: 1
                line_width: 4
                decimals: 0
                smoothing: true
                entities:
                  - sensor.unifi_controller
                show:
                  icon: false                        
                  labels: true
                  graph: bar
                  fill: fade
                  extrema: true
                color_thresholds:                 
                  - value: 0
                    color: "#33cc33"
                  - value: 50
                    color: "#ff9900"
                  - value: 100
                    color: "#ff3300"
              - type: custom:entity-attributes-card
                title: false
                heading_name: Namn
                heading_state: Antal Enheter
                filter:
                  include:
                    - sensor.unifi_controller.AP*  

          - type: iframe
            url: 'http://192.168.0.88:52198/WebRemote/musik.html'
            aspect_ratio: 77%
            paper-card-background-color: "rgba(0, 0, 0, 0.3)"

Javascript errors shown in your browser console/inspector

None

Additional information

I have tried the default theme, no difference, I have reinstalled my integrations in HACS, no difference. I reload cache via F12 and "Hard" in Chrome. I have hidden cards, but have tried to disable them, no difference.

When I show my dashboard on a 24 "with chromium browser - kiosk. Then it does not load the frontend/lovelace cards at all. I see menus or if I go into the supervisor. Sometimes it can show lovelace if I press F5 or ctrl + shift + F5 but it is completely sporadic.

zsarnett commented 4 years ago

clicking the Gif link doesnt work..

zeular commented 4 years ago

mneuron commented 4 years ago

I have the same issue in 0.116.2 but only in panel mode. The card margin in panel mode is not the same as in normal mode

zeular commented 4 years ago

I still have problems, can not find anything that solves it. Have tried turning off sensors and disabling lovelace cards but no difference.

What bothers me the most is that my standalone dashboard does not want to load the frontend when loading the start page. If I press the 3 points at the top right and choose to update, the frontend is loaded.

I saw in the changelog, a change with fronend: v0.116.1 (Update frontend to 20201001.2 (@bramkragten - # 41491)) Could it be the one who caused this?

zeular commented 4 years ago

I may have found what caused the error: ´lovelace-layout-card´ https://github.com/thomasloven/lovelace-layout-card The first horizontal card that holds 4 vertical cards.

If I remember correctly, it was among the first things I tried to change, but I have tried so much so I do not know in what order. Maybe it's related to something else I changed.

I'll let it go for a few days and we'll see how it goes. @thomasloven for info

tottka commented 4 years ago

I agree, the problem seems to be in the lovelace-layout-card. If you add column_width 25% (4 columns) the scrollbars & jumping goes away. It's a fix for my laptop screen but makes the screen on my phone unusable as it's all squashed together. Anyone else have a work around?

zeular commented 4 years ago

I also tested with 25%, but just like you say it did not turn out really well. Have you tried setting a fixed width in pixels? I think it worked better, but it depends on whether you work many different screens with different resolutions. Example: column_width: 200

Edit: Read more about it here: https://github.com/thomasloven/lovelace-layout-card/issues/96

mneuron commented 4 years ago

Are the column margins changed? If use lovelace-layout-card this light be a fix: https://github.com/thomasloven/lovelace-layout-card/issues/95#issuecomment-710861197

tottka commented 4 years ago

I saw that comment by Thomas but haven't figured out where to put the margin change, yet!

github-actions[bot] commented 3 years ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

marecabo commented 3 years ago

I still have that issue as well. It seems to occur when

the history graph cards are still loading their data (and there is no need for a vertical scroll bar yet because they all fit on the screen)
and then they load their data, expand vertically, resulting in the need for a vertical scroll bar in the browser window
which is reducing the browser window's width and flickering scroll bars appear in all the history graph cards.

github-actions[bot] commented 3 years ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

home-assistant / frontend