Open sgofferj opened 4 years ago
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.
That seems to still persist in 117.5
@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.
I am the reporter of the issue. My comment was in reply to the bot.
π€¦ββοΈ of course. sorry, I'll drink more β now π
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.
It still there.
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.
Issue is still present in 2021.7.3.
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.
Issue still present.
@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.
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.
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.
Same with the state-switch card in a grid card. I have made a reddit post if more details can help
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
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.
Issue still present in HA 2022.4.1
@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.
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: 'πͺ¨'
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.
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)
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 ?
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. π
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".
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
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.
@stalegjelsten Ahhh gotcha. Yeah that makes sense. No worries, was just excited for a fix to this!
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?
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.
This appears fixed after #16351. I create three big cards, they create three columns. I put the middle card in conditional and hide it. Now lovelace shows only two columns with no gap.
Closing as fixed, feel free to comment if you still see issues.
@karwosts Not fixed.
Also with default HA theme...
@sgofferj - that "default" theme still looks very heavily modded. Have you tried with stock configuration?
Just forgot to hard reload the page after theme change. What is "stock configuration"? This is the default HA theme, unmodified:
Can you add the full yaml for the minimal dashboard that reproduces this?
Also I still see you have card-mod in the DOM, maybe try removing that as well.
- icon: mdi:remote-tv
title: Remote
path: remote
badges: []
cards:
- type: vertical-stack
cards:
- type: markdown
content: '# TV'
card_mod:
class: header
- type: media-control
entity: media_player.living_room_tv
card_mod:
class: middle
- square: false
columns: 2
type: grid
cards:
- type: button
tap_action:
action: call-service
service: media_player.select_source
service_data:
source: YouTube
target:
entity_id: media_player.living_room_tv
icon: mdi:youtube
name: YouTube
hold_action:
action: none
card_mod:
class: button-bullet
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: webostv.command
data:
entity_id: media_player.living_room_tv
command: system.launcher/open
payload:
target: <redacted>
target: {}
name: Jellyfin
icon: mdi:shark-fin
hold_action:
action: more-info
entity: media_player.jellyfin_stefan_s_tv
card_mod:
class: button-lozenge
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: webostv.command
data:
entity_id: media_player.living_room_tv
command: system.launcher/open
payload:
target: <redacted>
target: {}
name: Garden
icon: mdi:cctv
hold_action:
action: none
card_mod:
class: button-bullet
- type: button
tap_action:
action: call-service
service: media_player.select_source
service_data:
source: Photo & Video
target:
entity_id: media_player.living_room_tv
name: Media
icon: mdi:play
hold_action:
action: none
card_mod:
class: button-lozenge
- type: button
tap_action:
action: call-service
service: media_player.select_source
service_data:
source: Web Browser
target:
entity_id: media_player.living_room_tv
name: Browser
icon: mdi:web
hold_action:
action: none
card_mod:
class: button-bullet
- show_name: true
show_icon: false
type: button
tap_action:
action: call-service
service: media_player.select_source
target:
entity_id: media_player.living_room_tv
data:
source: Yle Areena
name: YLE Areena
icon: mdi:map
hold_action:
action: none
card_mod:
class: button-lozenge
- type: media-control
entity: media_player.jellyfin_stefan_s_tv
card_mod:
class: middle
- type: markdown
content: '## '
card_mod:
class: footer
- type: vertical-stack
cards:
- type: markdown
content: '# Amplifier'
card_mod:
class: header
- square: false
columns: 2
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: switch.amplifier
name: Power
icon: mdi:power
card_mod:
class: button-bullet
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_vid1
entity: switch.amp_vid1
name: VID1
card_mod:
class: button-lozenge
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_vid2
entity: switch.amp_vid2
name: VID2
card_mod:
class: button-bullet
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_vid3
entity: switch.amp_vid3
name: VID3
card_mod:
class: button-lozenge
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_cd
entity: switch.amp_cd
name: CD
card_mod:
class: button-bullet
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_dvd
entity: switch.amp_dvd
name: DVD
card_mod:
class: button-lozenge
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_vol_dec
entity: switch.amp_vol_dec
name: VOL -
card_mod:
class: button-bullet
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_vol_inc
entity: switch.amp_vol_inc
name: VOL +
card_mod:
class: button-lozenge
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_surr
entity: switch.amp_surr
name: SURROUND
card_mod:
class: button-bullet
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_up
entity: switch.amp_up
name: Up
card_mod:
class: button-lozenge
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_dn
entity: switch.amp_dn
name: Down
card_mod:
class: button-bullet
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: switch.turn_on
service_data: {}
target:
entity_id: switch.amp_night
entity: switch.amp_night
name: Night
card_mod:
class: button-lozenge
- type: markdown
content: '## '
card_mod:
class: footer
- type: conditional
conditions:
- entity: media_player.wohnzimmer
state_not: unavailable
card:
type: vertical-stack
cards:
- type: markdown
content: '# Living room player'
card_mod:
class: header
- type: media-control
entity: media_player.wohnzimmer
card_mod:
class: middle
- type: markdown
content: '## '
card_mod:
class: footer
- type: conditional
conditions:
- entity: media_player.schlafzimmer
state_not: unavailable
card:
type: vertical-stack
cards:
- type: markdown
content: '# Bedroom player'
card_mod:
class: header
- type: media-control
entity: media_player.schlafzimmer
card_mod:
class: middle
- type: markdown
content: '## '
card_mod:
class: footer
- type: conditional
conditions:
- entity: media_player.player_2
state_not: unavailable
card:
type: vertical-stack
cards:
- type: markdown
content: '# ESP32 player'
card_mod:
class: header
- type: media-control
entity: media_player.player_2
card_mod:
class: middle
- square: false
columns: 2
type: grid
cards:
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: <redacted>
media_content_type: news
extra:
title: KJFK
target:
entity_id: media_player.player_2
name: KJFK
icon: mdi:airport
card_mod:
class: button-bullet
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: <redacted>
media_content_type: news
extra:
title: EFJY
target:
entity_id: media_player.player_2
name: EFJY
icon: mdi:airport
card_mod:
class: button-lozenge
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: <redacted>
media_content_type: news
extra:
title: EFJY
target:
entity_id: media_player.player_2
name: SWR3
icon: mdi:radio
card_mod:
class: button-bullet
- show_name: true
show_icon: true
type: button
tap_action:
action: call-service
service: media_player.play_media
data:
media_content_id: <redacted>
media_content_type: news
extra:
title: ESSSG
target:
entity_id: media_player.player_2
name: ESSG
icon: mdi:airport
card_mod:
class: button-lozenge
- type: markdown
content: '## '
card_mod:
class: footer
I'll try removing card mod but it's gonna take a moment. I have a little bit full calendar at the moment.
I put your yaml in my dashboard and it works as expected, no empty columns.
I can reproduce the issue in Firefox 117.0 but not Chrome 116.0.5845.141 - it appears that the CSS added in #16351 does not work in Firefox (the :has
selector seems unsupported according to https://caniuse.com/css-has).
Here's a minimal dashboard which reproduces the issue:
views:
- title: Home
cards:
- type: markdown
content: |-
Long card
Long card
Long card
Long card
Long card
Long card
Long card
Long card
Long card
Long card
- type: conditional
card:
type: markdown
content: |-
Long card
Long card
Long card
Long card
Long card
Long card
Long card
Long card
Long card
Long card
conditions:
- entity: domain.nonexistent
state: 'on'
- type: markdown
content: |-
Long card
Long card
Long card
Long card
Long card
Long card
Long card
Long card
Long card
Long card
It looks like this in Chome:
And this in Firefox:
I can reproduce the issue in Firefox 117.0 but not Chrome 116.0.5845.141 - it appears that the CSS added in https://github.com/home-assistant/frontend/pull/16351 does not work in Firefox (the :has selector seems unsupported according to https://caniuse.com/css-has).
Good find, it appears you are correct.
Note I maybe don't recommend enabling the has
support in firefox, that creates other problems, see #17182.
I will reopen this as OP requested (though I'm not sure if a new firefox-specific issue makes sense instead).
@karwosts
Thank you! I noticed a bunch of other problems I have with HA in Firefox which I just haven't gotten around to document properly yet. It seems, FF isn't tested by the HA devs :disappointed:
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.
Issue persists
Under some circumstances, this is also still happening in Chrome. Demo code for an affected dashboard:
views:
- title: Demo
cards:
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- type: entity-filter
show_empty: false
entities:
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
- sun.sun
state_filter:
- always_hidden
card:
type: entities
- type: conditional
conditions:
- entity: sun.sun
state: always_hidden
card:
type: conditional
conditions:
- entity: sun.sun
state: always_hidden
card:
type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
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.
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.
Nope, still not fixed...
Still encountering this issue on this side
The layout-card has a reflow option which helps. But it seems to fill columns before filling rows. I've got a suite of nice looking mushroom cards on conditional show for things like open doors, or dogs needing feeding, etc but in a regular grid most of the screen estate is taken up by empty 'cells'. Totally confused!
https://github.com/home-assistant/frontend/issues/6632#issuecomment-1100768147
As its been 2 years, just linking back to my comment as its still what I use today and still the best solution I've seen out there as a work around.
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.
Checklist
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
State of relevant entities
N.a.
Problem-relevant configuration
N.a.
Javascript errors shown in your browser console/inspector
None
Additional information
None