I'm having an issue with the layout of my lovelace dashboard. You can see it in the image. Basically, when I first load the dashboard, it will often be squished into a tiny column.

Reloading the page does not help. I need to click over to another view and then click back.

I use Firefox as my default browser. I have uBlock Origin installed, but I'm not blocking anything on the Home Assistant page. When I've checked on Edge I don't see this issue happening. I've never seen it on the companion app either.

Any suggestions on what to check?

Lovelace dashboard squished into since tiny column

  • OminousOrange@lemmy.caEnglish
    4·
    1 year ago

    Did you modify the yaml before it started doing this? Kind of looks like perhaps an incorrect value on a column number or width line of the grid layout card.

    For example, I have the following at the top of my mobile dashboard to force one column and a certain width (though it’d probably default to this anyway).

    title: Mobile views:

    • title: Home type: custom:grid-layout layout: max_cols: 1 grid-template-columns: 350px’
    • stallmer@lemmy.oneOPEnglish
      2·
      1 year ago

      I haven’t modified the yaml. It was all set up in the UI.

      If I click away from this view and then back it will display everything correctly.

      Correctly displayed layout after clicking away and returning

      It’s a 1 column grid-card with nested horizontal-stack cards within it. If I have multiple grid cards, it will display the left-most grid correctly, and squish the others to the right until I click away and back.

      Left-most grid column shown correctly, but left-most column is squished.

      Thanks for replying. I haven’t seen anyone else with this issue, so I’m guessing it’s something to do with my specific layout. I’ll have to dig further to see if maybe I accidentally edited something…

      • OminousOrange@lemmy.caEnglish
        2·
        1 year ago

        Interesting. Maybe try adding that grid-template-columns line and maybe it’ll force the width and get them to spread out? Only other thing would be try clearing browser cache if you haven’t already.