Several vertical-stack-in-card in a single view are stacked vertically

[pplucky]

https://community.home-assistant.io/t/stack-in-card-drop-in-replacement-for-vertical-stack-in-card/180072/51

[bat86]

Same problem after upgrade on 3.x version

[SAOPP]

Hi guys! Just updated my plugin to the latest 0.3.2 version. I have the same result. Seems like a bug.

[pplucky]

It seems to be a frontend issue, rather a card one.

[thecode]

I can confirm and easily reproduce this. HA 107.x, with vertical-stack-in-card version 0.2.1 cards are ordered correctly. With 0.3.x several cards are stacked vertically.

[SAOPP]

Eexactly right!

[blamaz]

Same here

[stave1989]

Is there a solution to this problem ?

[ofekashery]

@stave1989 As a temporary solution, you can try to use the layout-card.

[thecode]

Is there a solution to this problem ?

You can downgrade to version 0.2.1 for now

[stave1989]

@thecode The 0.2.1 "vertical-stack-in-card.js" file is unfortunately not available any more :(

[krkeegan]

This is source repository, all versions are always available.

Here is v0.2.1 if you want that, you will have to manually install it.

https://raw.githubusercontent.com/ofekashery/vertical-stack-in-card/v0.2.1/vertical-stack-in-card.js

Alternatively, within the HACS integration control panel. Click on the gear in the top right and change the Number of releases to show to 10 or something until you can see 0.2.1.

[stave1989]

Thank you @krkeegan I always manually install ;)

[magiva]

Is there a solution to this problem ?

You can downgrade to version 0.2.1 for now

downgrading to any available version (from home assistant) does not fix this

[scstraus]

I'm also having this problem.

With vertical-stack-in card:

Without vertical-stack-in card:

[magiva]

I've had to stop using it because of this. only workaround for me is to use the standard v card

br Mark-Andrew

On Thu, 16 Apr 2020, 22:40 Sean Straus, notifications@github.com wrote:

I'm also having this problem.

With vertical-stack-in card:

[image: image] https://user-images.githubusercontent.com/7644023/79504424-29ba8b00-8033-11ea-9501-e9ba8c4d37bc.png

Without vertical-stack-in card:

[image: image] https://user-images.githubusercontent.com/7644023/79504078-89fcfd00-8032-11ea-8e37-176fb52a54fb.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ofekashery/vertical-stack-in-card/issues/80#issuecomment-614883000, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABZMQZK6WQT4NUNONOVYSRLRM5UKNANCNFSM4LRPVN5A .

[scstraus]

Update: downgrade to 0.2.1 worked for me.

[magiva]

thats great im sure but it didnt work for me. repeating it doesnt make it work ya know :)

On Thu, 30 Apr 2020 at 12:50, Sean Straus notifications@github.com wrote:

Update: downgrade to 0.2.1 worked for me.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ofekashery/vertical-stack-in-card/issues/80#issuecomment-621758356, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABZMQZOLPN77W7TIA52TOZTRPFJVVANCNFSM4LRPVN5A .

[scstraus]

Did you clear your cache and click reload in the upper right hand menu of lovelace?

[NvrBst]

Can also confirm that the cards are all in a single line when loaded in 0.3.3. But if you then Hold-Shift while pressing "Reload" in Chrome, then the view is displayed properly.

But if you exit Lovelace and go back, the view will return to the single line stacked. Until u reload and wipe cache again.

EDIT: Actually a Shift-Reload isn't even necessary, just pressing Reload alone makes the view normal, until you exit the session and go back.

[hcoohb]

Same problem here! It seems to happen to me only if I nest some vertical-stack-in-card though

[Nicras]

Same here, wondered why my cards are stacked vertically. Any news on this?

[scstraus]

Looks like fix should be in next major release hopefully.

[krkeegan]

I fixed the glitch based on the guidance from https://developers.home-assistant.io/blog/2020/06/01/getcardsize/ . However, I am not a javascript developer, and it took me a few hours to decipher the concept of a Promise. The patch works well for me on version 0.110.4 of HomeAssistant. I believe you will need at least version 0.110 for it to work.

Hope this helps. Feel free to clean up my code or abandon it if I have done this in the wrong way.

[krkeegan]

I can't stop tinkering.

This is adapted from how the native Horizontal Stack does it:

  async getCardSize() {
    const promises = [];
    for (const element of this._refCards) {
      promises.push(computeCardSize(element));
    }

    const results = await Promise.all(promises);

    return results.reduce((a,b) => a + b, 0);
  }

https://github.com/home-assistant/frontend/blob/7fb852893ccb956ddd7cf25c70c4ae9ddddab0b9/src/panels/lovelace/cards/hui-horizontal-stack-card.ts

[NvrBst]

Yea, and it's officially supported in 0.111 now too: https://developers.home-assistant.io/blog/2020/06/01/getcardsize/

[scstraus]

So I just upgraded to .111.2 and vertical stack in card 0.3.3, but now I get something a little better than the full error, but not as good as having it fully working right. This is happening on any view where I use the vertical stack in card but not others where I don't. It seems as though it does well with the promise until the second half of the view and then gives up and stacks the rest.

I tried it also with @krkeegan's pr as well as with his later suggestion but still no luck after clearing browser cache and rebooting.

[krkeegan]

My PR no longer works on .111. I don't completely understand Promises, so I am having a hard time writing a fix. But I believe someone who knew what they were doing could probably solve this in a few minutes.

[scstraus]

Bummer. Good to know that it's not only me though. I hope someone can pull it off.

[krkeegan]

So one thing that works for me, but is a horrible hack is to change getCardSize to this:

  getCardSize() {
    return 5;
  }

It is a horrible hack as it makes hard codes the card size. But it at least works for me in the interim.

[scstraus]

Wouldn't that make every card report the same size regardless of actual size though? As I've always had some problems with card size being reported properly, I've had some cards where I use card mod to hardcode the size thus:

  - type: custom:mod-card
    report_size: 4
    card:
      type: custom:vertical-stack-in-card
      cards:
<your usual vertical stack cards config here>

But it doesn't always work well. If I get desperate, I will go in and measure each card and try to hardcode them in this way.. I'm hoping it doesn't come to that, though.

[ofekashery]

@scstraus could you share your vertical-stack-in-card config of the screenshot you sent above please? I can't reproduce this issue anymore with my configs..

[scstraus]

Happily. My whole config is on my github. The YAML for view I posted the screenshot of is here and is described here. I have other views with the same problem, I can send you screenshots of how those are rendering and the config is there too if you want more examples.

And I will gladly test anything you need me to. I am a very heavy user of your card so this particular problem is a major one for me, so anything I can do to make things easier for you to test, please just let me know. We could open up a discord and you can try changes and I can send you the results in real time if you want.

Here is the code for just one of the cards in the view. They are all pretty much the the same in that view, but there's some other stuff like popup cards which might have some effect on the outcome:

 - type: custom:vertical-stack-in-card
    cards:

    - type: custom:mini-graph-card
      entities:
        - entity: sensor.living_room_temperature
          name: LIVING ROOM
      hours_to_show: 24
      points_per_hour: 1
      height: 150
      font_size_header: 16
      decimals: 1
      show:
        extrema: true
      color_thresholds:
        - value: 18
          color: "#6666ff"
        - value: 20
          color: "#ccccff"
        - value: 22
          color: "#f3f300"
        - value: 24
          color: "#f39c12"
        - value: 25
          color: "#d35400"
        - value: 26
          color: "#c0392b"

    - type: custom:simple-thermostat
      entity: climate.living_room
      step_size: 0.5
      name: false
      sensors:
        - attribute: preset_mode
          name: Mode

[scstraus]

Worth noting that it probably needs to be tested with more than 20 fairly complex cards to reproduce, as it appears to place the first ~20 into ~10 stacks correctly before giving up and throwing the rest into a big column.

[scstraus]

Interestingly, I can get the cards to stack correctly if I first open in a 2 column view and then expand window to a 3 column view. But they stack incorrectly if I start in a 3 column view.

[scstraus]

What do you think about adding an option to the card that allows us just to hardcode the size of the stack and so allowing it to answer immediately with the size rather than to wait for it to be calculated, which in my case appears to lead to timeouts before the "promise" can be returned, likely because I'm using too complex views? I've tried in the past to do this with browser mod but it doesn't really play nicely with stacks.. Seems like this is the simplest solution to this problem.

[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

[ryanwinter]

Also switched to Canary Card which solved my this problem for me.

[pplucky]

Also ended up moving to Canary Card without looking back.

[ofekashery]

Fixed in v0.4.0 🎉

[jeremysherriff]

Nice work