this post was submitted on 19 Sep 2023
7 points (88.9% liked)

homeassistant

11878 readers
1 users here now

Home Assistant is open source home automation that puts local control and privacy first. Powered by a worldwide community of tinkerers and DIY enthusiasts. Perfect to run on a Raspberry Pi or a local server. Available for free at home-assistant.io

founded 1 year ago
MODERATORS
 

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

you are viewing a single comment's thread
view the rest of the comments
[–] [email protected] 4 points 1 year ago* (last edited 1 year ago) (1 children)

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'
[–] [email protected] 2 points 1 year ago* (last edited 1 year ago) (1 children)

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...

[–] [email protected] 2 points 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.