Cards stacking vertically

[PierreScerri]

Checklist:

• [x] I updated to the latest version available
• [x] I cleared the cache of my browser

Release with the issue: Don't know Last working release (if known):

Browser and Operating System: Macos Catalina with Safari or Brave

Description of problem: Separate cards are stacked vertically if stack-in-card is used.

Javascript errors shown in the web inspector (if applicable):

Additional information: Garage, Pool & Lights are 3 separate vertical stacks.

The first screenshot shows the frontend with the standard vertical-stack card.
The second screenshot shows the frontend when using custom:stack-in-card.

!

[schteff]

It seems to be because of this https://github.com/home-assistant/frontend/issues/5321

[McGiverGim]

I've observed the same in my case, but more exaggerated:

This is with vertical-stack:

This is with stack-in-card (all the cards in a single column):

The most curious is that if I press F5 to refresh the page...:

It seems to work as expected.

I suppose we need to wait until the bug is fixed to see if it is the culprit...

[PierreScerri]

That is a good observation. I tried the refresh page trick on my Mac and it works too, but not always. The link mentioned above (https://github.com/home-assistant/frontend/issues/5321) gives some indication of what the problem is. It may also explain why refresh page works.

But, as you said, we will have to wait for a solution to be found.

[McGiverGim]

Is not only the F5 trick that works. If you copy the link and paste it into a browser, it works. Is only when you select the panel from the left menu when it does not work.

[PierreScerri]

This is the behaviour of the refresh page action on Safari:

Screen Recording 2020-04-01 at 12.02.31.zip

Behaviour is similar on Brave

[scstraus]

I'm also having this problem. Prior to .107, the cards would correctly distribute in columns. Now they all stack in one big column down the middle.

With vertical-stack-in card:

Without vertical-stack-in card:

[McGiverGim]

It seems the fix is almost ready: https://github.com/home-assistant/frontend/pull/6023

[tomlevels]

The issue is fixed in 0.111.0 and there is already a fix for vertical-stack-in-card, maybe this can help you: https://github.com/ofekashery/vertical-stack-in-card/issues/80

[PierreScerri]

I'm on HA 0.111.7 and Stack-in-card 0.1.1 and the issue is still present

[scstraus]

How are you on .111.7 if it hasn't been released yet?

[PierreScerri]

My bad. It's 0.111.1. I had just upgraded from 0.110.7

[scstraus]

Maybe stack-in card hasn't fixed it yet, you could try vertical-stack-in-card, by all accounts, it's been fixed.

[tomlevels]

What I meant is that the bug in Home Assistant is fixed, now this custom card has to be fixed. For the vertical-stack-in-card, someone already proposed a pull-request for fixing this issue.

[scstraus]

It's not fixed in vertical-stack-in-card either, the one linked above didn't work in later versions of .111.. Seems this one will be a problem for a while...

[PierreScerri]

I'm very sorry but I've given up on this card. Removed it from my setup.

[redjab]

I created a fix for this if anyone wants to try: https://gist.github.com/redjab/283da2aab31af5dfd2e51549905dfe43. It's probably a hack, haven't digged much into lovelace and how custom cards work, but this works fine in my setup

[scstraus]

I ended up moving to Canary Card which solves this problem for me (finally!). I also found out that part of my issue was caused with a similar problem with State Switch Card

[ildar170975]

Seems that the bug is still present. It is erratic - sometimes cards have a proper layout, sometimes they are all stacked in one column. Checked in Chrome.

[scstraus]

Yes, AFAIK no one has bothered fixing it, the only card that works is canary card.