Dashboard layout squished into very small column
Dashboard layout squished into very small column
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?
You're viewing a single thread.
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'
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.
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.
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...
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.