Vertical stacking issue

[mgiako]

Describe the bug

First of all, beautiful card! I have a problem with vertical stacking cards side by side. I would like to use two or three columns to take advantage of all the space. But the result is different every time I refresh the page. The problem occurs both with the GUI and in yaml mode Has anyone else had this problem?

To Reproduce I have a more complex config, but to reproduce the problem this is enough:

    title: F1
    path: f1
    cards:
      - type: vertical-stack
        cards:
          - type: custom:formulaone-card
            card_type: countdown
            show_raceinfo: true
      - type: vertical-stack
        cards:
          - type: custom:formulaone-card
            card_type: constructor_standings

Screenshots First refresh:

Same config second refresh:

Additional context I'm on Home Assistant 2023.2.2 Supervisor 2023.01.1 Operating System 9.5 Frontend 20230202.0 - latest

OS: Windows10 Browser: Chrome Version: 109.0.5414.120

[mgiako]

Tha layout changes even clicking on the icon to view/hide the side bar

[marcokreeft87]

Try not using 1 vertical stack card and inside this card the formulaone-cards.

[marcokreeft87]

And thank you for the compliment!

[mgiako]

Thanks for the answer, but: as I said my actual configuration is more complex:

  - title: F1
    path: f1

    cards:
      - type: vertical-stack
        cards:

          - type: custom:formulaone-card
            card_type: countdown        
            show_raceinfo: true     

          - type: custom:formulaone-card
            card_type: results

      - type: vertical-stack
        cards:
          - type: custom:formulaone-card
            card_type: driver_standings
            standings:
              show_flag: true
              show_team: true

          - type: custom:formulaone-card
            card_type: constructor_standings
            standings:
              show_teamlogo: true            

      - type: vertical-stack
        cards:

          - type: custom:formulaone-card
            card_type: schedule
            previous_race: italic
            date_locale: it

          - type: custom:formulaone-card
            card_type: qualifying_results
            standings:

If I don't use vertical stack, the single cards were disposed quite random by homeassistant. I have other cards in other views where I use vertical stack to dispose the cards. In those cases the visual layout of the cards is rock solid. And stable.

The problem only appears with F1 cards. Not a big deal, I was just wondering if it only happens to me or others as well

[marcokreeft87]

You are the only one so far posting this issue. But I think the issues lies with vertical card. I use the f1 cards with 2 en 3 column layouts without an issue. But I use the masonry layout type.

[mgiako]

Ok, thanks. We'll see if others report this problem

[marcokreeft87]

Sounds like a plan. What might be this issue, the f1 card does web requests after its rendered to the page. So the size changes after render. Maybe the vertical stack card can't handle that

[JoostAB]

@mgiako Maybe the custom:grid-layout by Thomas Lovén can help you out here... Extremely flexible!

[mgiako]

Thanks, I'll try.