Lovelace creates "empty" column for conditional cards when cards are not shown

[sgofferj]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

The problem

In its algorithm for organizing the cards, Lovelace also sometimes creates columns which only contain hidden conditional cards which breaks the layout.

Expected behavior

Lovelace should not create "empty" columns. One possibility would be to append a hidden conditional card to the previous column.

Steps to reproduce

Create a Lovelace dashboard with multiple conditional cards which are hidden.

Environment

• Home Assistant release with the issue: 0.114.1 docker
• Last working Home Assistant release (if known): none
• Browser and browser version: Chrome latest, Firefox latest
• Operating system: Ubuntu 18.04, Windows 10

State of relevant entities

N.a.

Problem-relevant configuration

N.a.

Javascript errors shown in your browser console/inspector

None

Additional information

None

[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.

[sgofferj]

That seems to still persist in 117.5

[iantrich]

@sgofferj if an issue is open you can assume it still persists. No need to comment as such. Just add a thumbs up to the original issue.

[sgofferj]

I am the reporter of the issue. My comment was in reply to the bot.

[iantrich]

🤦‍♂️ of course. sorry, I'll drink more ☕ now 😄

[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.

[bkupidura]

It still there.

[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.

[sgofferj]

Issue is still present in 2021.7.3.

[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.

[sgofferj]

Issue still present.

[sgofferj]

@spacegaier It might be a lovelace isssue, not specifically a conditional card issue. I see the same problem with the state switch card by Thomas Loven. Somebody reported the same behavior there as a bug and I made a cross-reference to this issue here.

[wormuths]

Same here. I have different conditional cards configured to show for different weather scenarios, and the whole row is eaten by the blank cards that don't currently need to show.

[fikustommy]

I am also bothered by this very frustrating issue. It seems the problem is that Lovelace creates a div column and populates it with hui-conditional-cards and applies style="display: none;" to them, but they are still taking up "space" in the column so that no other items can go there.

I tried using state-switch cards. This works great for replacing a card with another based off conditions, but there's no hiding a card completely because of the Lovelace root issue.

[Bradford1138]

Same with the state-switch card in a grid card. I have made a reddit post if more details can help

[pejotigrek]

I can't believe it, but after all those years [I've found first appearence of this issue in the 2018...] this is still a problem!

no matter what card is used inside [stacks, grids etc.] the whole conditional card still is considered as "I am here, so display me!". this is annoying as hell, especially when the conditional content should "jump" to next column [even without the vertical-stack configured].

the whole right column [highlighted by me in developer's tools in chrome] should be gone, and therefore the left column should be centered

[OmgImAlexis]

I found a "workaround" just trying to find a way I can apply it.

The parent element needs to either not exist or the style that's applied to the child element needs to be removed from the child and applied to the hui-conditional-card.

For example in my case I have multiple button-card elements here. Each in a conditional to only show if they're set to on. If I move the styles from the button-card child to the hui-conditional-card parent it all works.

[FsxShader2012]

Issue still present in HA 2022.4.1

[nicolo-ribaudo]

@FsxShader2012 I understand that this bug is annoying (I am affected by it too), but it's not necessary to comment that "it's still present". If it was fixed, this issue would have obviously been closed. It's still open because it's still present.

[finder39]

I have also found a workaround, but its messy, tweaks a bit when the page is first opened, and requires work for each specific case.

Here is a gif with both the working (top) and non-working examples on top of each other:

And here is that 'tweaking' i was talking about as a page opens or is switched to: State met: State not met:

Here is my code that makes it work:

- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      template: chip_icon_only
      variables:
        ulm_chip_icon_only: '🔥'

    - type: custom:mod-card
      card_mod:
        style: |
          :host {
            flex: 0 0 auto !important;
            {%- set sensor = states('binary_sensor.refrigerator_contact') %}
            {%- if sensor != 'on' %}display: none !important
            {%- endif %}
          }
      card:
        type: conditional
        conditions:
          - entity: binary_sensor.refrigerator_contact
            state: 'on'
        card:
          type: 'custom:button-card'
          template: chip_icon_only
          variables:
            ulm_chip_icon_only: '🧊'
          card_mod:
            style: |
              :host {
                width: 100% !important;
                max-width: none !important;
              }

    - type: 'custom:button-card'
      template: chip_icon_only
      variables:
        ulm_chip_icon_only: '🪨'

and here is the code that we expect to work but doesn't:

- type: horizontal-stack
  cards:
    - type: 'custom:button-card'
      template: chip_icon_only
      variables:
        ulm_chip_icon_only: '🔥'

    - type: conditional
      conditions:
        - entity: binary_sensor.refrigerator_contact
          state: 'on'
      card:
        type: 'custom:button-card'
        template: chip_icon_only
        variables:
          ulm_chip_icon_only: '🧊'

    - type: 'custom:button-card'
      template: chip_icon_only
      variables:
        ulm_chip_icon_only: '🪨'

I hope this helps someone, but I also hope we can get to the bottom of this so this isn't necessary anymore

Edit on 6/23/22 BONUS: Do this if you want to be able to wrap the chips when too many show in a row

- type: custom:mod-card
  card_mod:
  style:
    hui-horizontal-stack-card:
      $: |
        div {
          flex-wrap: wrap;
          row-gap: 8px
        }
  card:
    type: horizontal-stack
    cards:
      - type: 'custom:button-card'
        template: chip_icon_only
        variables:
          ulm_chip_icon_only: '🔥'

      - type: custom:mod-card
        card_mod:
          style: |
            :host {
              flex: 0 0 auto !important;
              {%- set sensor = states('binary_sensor.refrigerator_contact') %}
              {%- if sensor != 'on' %}display: none !important
              {%- endif %}
            }
        card:
          type: conditional
          conditions:
            - entity: binary_sensor.refrigerator_contact
              state: 'on'
          card:
            type: 'custom:button-card'
            template: chip_icon_only
            variables:
              ulm_chip_icon_only: '🧊'
            card_mod:
              style: |
                :host {
                  width: 100% !important;
                  max-width: none !important;
                }

      - type: 'custom:button-card'
        template: chip_icon_only
        variables:
          ulm_chip_icon_only: '🪨'

[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.

[rigrig]

Still an issue:

Home Assistant 2022.9.7
Supervisor 2022.09.1 Operating System 9.0 Frontend 20220907.2 - latest Firefox 105.0.1 (64-bit)

[sgofferj]

Can somebody please turn off the stale bot? I wouldn't say that's a minor issue and everybody who posted here will be following the issue and happily close it when it has been corrected. @frenck ?

[s-hutter]

Since this issue never got the attention it deserves in my opinion, I decided to create a post on it 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 old bug more visibility. 🙂

[stalegjelsten]

Hi all! I have also had this problem, ~~but I have found a workaroud that works for me~~. I use a Lovelace dashboard that I manage through the user interface (no configuration.yaml).

~~To avoid the empty column I simply put my conditional cards into a grid card. So the hierarchy becomes Grid card → Conditional card → "Card to be displayed".~~

[cammcnab]

I tried this just now @stalegjelsten and couldn't get it to work… Maybe I'm doing it wrong. The conditional cards still hold a spot (column) even within a grid card.

Did you wrap the entire dashboard in a grid card with multiple columns, or just that one column with a grid card (1 column grid) and the conditionals within that? Thanks in advance

[stalegjelsten]

Hi @cammcnab, I'm sorry but I may have been to quick to celebrate and getting your hopes up. It seems that it works for be because the priority of my newly created grid card is all the way at the bottom. If I "promote" the card by pressing the ↑ arrow while rearranging the cards, the column sometimes goes blank.

I have many different non-conditional cards in my Dashboard. I have grouped all my conditional cards into the grid card with 1 column so that it becomes a vertical stack.

[cammcnab]

@stalegjelsten Ahhh gotcha. Yeah that makes sense. No worries, was just excited for a fix to this!

[sandman98321]

It's bizarre to me that the WTH thread got so many votes, and this has been open so long, but there has never been any dev assignment or interaction about the issue. Is there anything that can be done to at least get some attention?

[mrestorff]

Unfortunately, even the auto-entites card suffers from this issue, as the flexbox options are applied to all cards that don't explicitly overwrite it.