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

  • @stallmerOPEnglish
    2•9 months 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•9 months 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.