Vertical Stack with Conditional Card - Creating White Space

[mynameisdaniel32]

Home Assistant release with the issue: 0.83.2

Last working Home Assistant release (if known): Unsure

Browser and Operating System: Chrome & Safari (macOS)

Description of problem: When using a conditional card in a vertical-stack, when the first card is hidden, there is white-space created in its place, bumping the next card down slightly by a few pixels.

Ignore my messy test page, but the below screenshots show when the first item in my vertical stack is shown (on the right half), the top of the right panel is level with the items on the left. When I go to any other item in this vertical stack being the first displayed, the top edge sits a few pixels lower. Switching between the second and third items doesn't add to the gap, the space only seems to appear when the first item is hidden.

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

Additional information: `

  - type: vertical-stack
    cards:
      - type: conditional
        conditions:
          - entity: input_select.tablet_panel_detail
            state: "Lights"
        card:
          (LIGHT CARD)

      - type: conditional
        conditions:
          - entity: input_select.tablet_panel_detail
            state: "Lights Advanced"
        card:
          (ADVANCED LIGHT CARD)

      - type: conditional
        conditions:
          - entity: input_select.tablet_panel_detail
            state: "Media"
        card:
          (MEDIA CARD)

`

[Grezvany13]

The problem is caused because all the elements get a margin top and bottom, which are removed on the first (margin-top) and last (margin-bottom) elements. However it's not taking in account if the first (or last) element is visible or not.

Since the first element is hidden (in your case the conditional card), the margin-top of the second element is still visible, which causes a 4px offset.

Unfortunately there is no "nice" fix for this with CSS or vanilla JS, and will require jQuery (or similar) to fix this issue.

Perhaps it's a solution to add a negative padding/margin on the root div, and removing the :first-child and :last-child selectors from the CSS.

[iantrich]

related: https://github.com/home-assistant/home-assistant-polymer/issues/2395

[barrymossel]

This should have been fixed regarding https://github.com/home-assistant/home-assistant-polymer/pull/1999 but for me it still exists. Hidden conditional cards leave whitespace:

[dfritsch86]

I have the same issue too, i have an empty column where a conditional card would show up if the conditions were met.

[stale[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue now has been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[s-hutter]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

Problem still persists in latest version.

[alexwohlbruck]

Is there any solution for this? Messing with the CSS in my browser tools but I even after deleting the cards from the layout, they still leave gaps. I'm assuming there is some kind of javascript code that calculates the positions of the cards (ie. Masonry.js), is there any way we can access that API?

[bramkragten]

There is not js involved, we don't use Masonary. Removing the elements should remove the spacing.

[barrymossel]

Though the problem still persists.

[diamant-x]

Facing the same issue, although is important to disitnguish between vertical spaces (Such as the issue author setup), and horizontal spaces. Critical Scenario 2 next:

1. Scenario 1: Vertical spaces appearing.

• Hypothesis: An empty vertical stack still populates as a card for layout purposes.
• Test: 3 cards whatsoever, but second card to be a vertical/horizontal stack card. Include a single card in the stack, to be a conditional card. Set a condition so that it dissapears. Ensure the lovelace viewport is narrow enough so that all cards appear vertically.
• Issue: When disappearing the middle card conditional card, the other 2 cards won't be right next to each other.
• WORKAROUND: Encapsulate your vertical/horizontal card inside a conditional card, with condition with some sort of group collection of the subconditions.
• Expected solution: An empty card shouldn't be rendered at all.

2. Scenario 2: Horizontal spaces appearing.

• Hypothesis: The view controller program that calculates how many columns to generate in a wide viewport, takes into account total # of cards, not visible only.
• Test: 3 cards whatsoever, but second card to be a conditional card. Set a condition so that it dissapears. Ensure the lovelace viewport is wide enough so that all cards appear horizontally (3 columns).
• Issue: When disappearing the middle card conditional card, the other 2 cards won't be right next to each other; a big empty column is left in the middle.
• WORKAROUND: NONE.
• Expected solution: An empty card shouldn't be rendered at all; only 2 columns should appear.

Any help and/or fixes for this would be appreciated! Thanks.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[barrymossel]

This is still a relevant issue.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[barrymossel]

And still this issue is relevant. If someone needs more information, I will be happy to provide it!

[bangcrash]

I still have this issue and can demonstrate/supply config etc. if needed.

[JDunnio]

Same here. Please fix this annoying bug. There is a workaround of using a grid card with 1 column. Is there something to be learned for the vertical stack card?

ps. i call this a workaround bs when nesting multiple time the grid card with the input #columns takes more precious space on my screen when editting.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[bangcrash]

This is still a problem as of version 2021.6.5

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[bangcrash]

This is still a problem as of version 2021.9.6 and I can reproduce/demonstrate if necessary

[Glennesink]

Still a problem in 2021.10

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[bangcrash]

Still happening in 2021.12.9

[krazos]

This is still an issue in 2022.2.0b4. The empty space above the Seasonal Decorations entities card in the screenshot corresponds to a vertical stack card containing two hidden conditional cards.

type: vertical-stack
cards:
  - type: conditional
    conditions:
      - entity: media_player.sonos_beam
        state: playing
      - entity: sensor.sonos_beam_source
        state_not: TV
    card:
      type: media-control
      entity: media_player.sonos_beam
  - type: conditional
    conditions:
      - entity: media_player.sonos_move
        state: playing
    card:
      type: media-control
      entity: media_player.sonos_move

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[krazos]

Still an issue in 2022.6.1

[diamant-x]

Also confirm is still an issue in 2022.6.1. I also checked github issue tracker and now this is officially the oldest still open bug report in Github Homeassistant Frontend with 3.5 years old https://github.com/home-assistant/frontend/issues?q=is%3Aissue+is%3Aopen+sort%3Acreated-asc

Thanks.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[krazos]

This is still an issue as of 2022.9.5.

[s-hutter]

Since this issue never got the attention it deserves in my opinion, I decided to mention it in a post for the current "What the heck?" month of October 2022: https://community.home-assistant.io/t/471426 Votes are very much welcome to finally give this way too old bug more visibility. 🙂