Lovelance breakpoints problems when Loading dashboard

Hi, I use Home Assistant with Fully Kiosk Browser on an Lenovo Tab3. To make it more stable I reload the page every hour. This is where the problems start.

I use a 3 (masonry) layout dashboard to fit the 10" screen. Often when reloading the page the 3 columns did not appear. Instead I sometime see 2 columns or sometime 1 column. After reload then the 3 columns appear again.

This did not seems to be a problem with “Fully Kiosk Browser” or Android. I also noticed this on my desktop browser but since I did not often directly load a dashboard URL there, it did not happen often.

For a permanent dashboard this is a pretty annoying issue. I did multiple Home Assist update in between with no change on this.

I also tested GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards. with seems to make it a little better (did not happens that often) but it also happens.

What can I do about that?

Nothing unfortunately. It has been an issue since day one of Lovelace dashboards.

The way I work around this is to expand the left hand menu then collapse it again. This can’t be done programmatically as far as I know.

I also encountered this problem.
For me the fix was changing the “View type” to “Panel” and then placing all my cards into Grid card.


Editing will be cumbersome, but at least dashboard loads always as it should :slight_smile:

The only way to guarantee that lovelace cards won’t move around on larger screens is to put them into vertical or horizontal stacks (or a combination of the two). This is because “Lovelace” was designed from the beginning to be “mobile first”.

The dashboard above has two vertical stacks, each row containing a horizontal stack or a grid.

This one has a single vertical stack with a horizontal stack on each row. As @holger14 points out, the view mode can then be changed to “panel” giving a wider display with larger cards. This only works for a single card, though - hence the need for a single vertical stack. Panel displays often look weird on a mobile phone.

Not relevant to the OP, but if you tweak the theme you can make the card outlines disappear, which looks quite good on a wall panel.

It still occurs. Occasionally I’ll open my main dashboard to be greeted by three columns of vertical stacks. Expanding and contracting the left hand menu reverts it to the usual four columns of stacks.

I don’t want to grid it up completely as that causes issues when viewing on smaller screens when the cards become too narrow.