ildar170975
commented
1 month ago 2000 lines of code
Open HuisAutomatisering opened 1 month ago
ildar170975
commented
1 month ago 2000 lines of code
HuisAutomatisering
commented
1 month ago I did my best. There is no other official build-in "remote" solution that does the same. Don't want to go HACS route. Anyway it's about the issue dropdowns going behind the picture elements since 2024.5, not about the card design.
ildar170975
commented
1 month ago Thing is that the view should have been simplified for testing & investigating purpose. 2000 lines contains lots of your entities (which could be crucial for conditional cards), it is not easy just copy/paste the code into own setup for testing.
Also, I guess this is a look from some mobile client (which was not mentioned). Have you tested on a desktop PC?
HuisAutomatisering
commented
1 month ago Oke, here is a short example, same effect:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: entities
entities:
- input_select.select_device
- type: conditional
conditions:
- entity: input_select.select_device
state: TV
card:
type: picture-elements
image: /local/640x360transparant.png
elements:
- type: state-icon
icon: mdi:power
tap_action:
action: call-service
service: remote.send_command
service_data:
command: PowerToggle
device: Tv woonkamer
delay_secs: 0.4
target:
entity_id: remote.harmony_hub
entity: remote.harmony_hub
style:
top: 5%
left: 5%
transform: scale(1.25)replace example image and entities with own.
ildar170975
commented
1 month ago Here is from Win10+Chrome (2024.5.0, default theme):
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: entities
entities:
- input_select.test_value
- type: conditional
conditions:
- entity: input_select.test_value
state: one
card:
type: picture-elements
image: /local/images/test/blue.jpg
elements:
- type: state-icon
icon: mdi:power
entity: sun.sun
style:
top: 5%
left: 5%Same in iOS companion app (iPad Air 2, iOS 15.x)
HuisAutomatisering
commented
1 month ago So it seems a theme-related issue. This is the relevant toppart of my configuration.yaml
# Loads default set of integrations. Do not remove.
default_config:
# Load frontend themes from the themes folder
frontend:
themes:
theme1:
primary-color: "#3593bc"
modes:
light:
lovelace-background: 'center / cover no-repeat url("/local/Desert4.png") fixed'
dark:
lovelace-background: 'center / cover no-repeat url("/local/backgroundpaars.jpg") fixed'
theme2:
primary-color: "#3593bc"
modes:
light:
lovelace-background: 'center / cover no-repeat url("/local/Desert4.png") fixed'
primary-color: "#3593bc" # Menu bar
ha-card-border-color: rgba(224, 224, 224, 0.95) # Card borders
ha-card-background: rgba(256, 256, 256, 0.95) # Transparant card backgrounds
card-background-color: rgba(256, 256, 256, 0.9) # Transparant popup menu
dialog-backdrop-filter: blur(5px) # Dialogue blur
ha-card-backdrop-filter: blur(5px) # Card background blur
dark:
lovelace-background: 'center / cover no-repeat url("/local/sky2.jpg") fixed'
primary-color: "#3593bc"
ha-card-border-color: rgba(64,64,64, 0.5)
ha-card-background: rgba(0, 0, 0, 0.5)
card-background-color: rgba(32, 32, 32, 0.95)
dialog-backdrop-filter: blur(5px)
ha-card-backdrop-filter: blur(5px)
automation: !include automations.yaml
script: !include scripts.yaml
scene: !include scenes.yaml
#group: !include groups.yamlDo you observe the issue with a DEFAULT theme? (btw looking at your themes code I see no logical explanation how these variables for colors & filters may affect z-index)
HuisAutomatisering
commented
1 month ago No this issue is gone with the default theme. (I also don't know why).
Proof of concept :-)
ildar170975
commented
1 month ago theme1:
theme1:
primary-color: "#3593bc"
modes:
light:
lovelace-background: 'center / cover no-repeat url("/local/images/test/orange.jpg") fixed'
dark:
lovelace-background: 'center / cover no-repeat url("/local/images/test/orange.jpg") fixed'theme2:
theme2:
primary-color: "#3593bc"
modes:
light:
lovelace-background: 'center / cover no-repeat url("/local/images/test/orange.jpg") fixed'
primary-color: "#3593bc" # Menu bar
ha-card-border-color: rgba(224, 224, 224, 0.95) # Card borders
ha-card-background: rgba(256, 256, 256, 0.95) # Transparant card backgrounds
card-background-color: rgba(256, 256, 256, 0.9) # Transparant popup menu
dialog-backdrop-filter: blur(5px) # Dialogue blur
ha-card-backdrop-filter: blur(5px) # Card background blur
dark:
lovelace-background: 'center / cover no-repeat url("/local/images/test/orange.jpg") fixed'
primary-color: "#3593bc"
ha-card-border-color: rgba(64,64,64, 0.5)
ha-card-background: rgba(0, 0, 0, 0.5)
card-background-color: rgba(32, 32, 32, 0.95)
dialog-backdrop-filter: blur(5px)
ha-card-backdrop-filter: blur(5px)BINGO ))))))))))
ildar170975
commented
1 month ago 2024.5 contains changes for variables. Suggest to reflect in the issue's title that using theme vars cause the problem.
Minimal test example:
theme3:
ha-card-backdrop-filter: blur(5px)type: vertical-stack
cards:
- type: entities
entities:
- input_select.test_value
- type: picture-elements
image: /local/images/test/blue.jpg
elements:
- type: state-icon
entity: sun.sun
style:
top: 50%
left: 50%Title updated.
Is it something you can fix? Or is it me that should not do the ha-card-backdrop-filter: blur(5px) , which is beatiful by the way...
ildar170975
commented
1 month ago Actually, this is not about picture elements. Z-index was broken after several PRs related to theme vars.
type: vertical-stack
cards:
- type: entities
entities:
- input_select.test_value
- type: entity
entity: sun.suntheme3:
ha-card-backdrop-filter: blur(5px)Oke but do I need to do anything now? Is the z-index being fixed or do i need to open another issue somewhere else?
ildar170975
commented
1 month ago If you are asking me - I am not doing this))). It depends on when someone from frontend dev team cares to fix it... Probably the person who added all these PRs recently.
ildar170975
commented
1 month ago I would suggest to:
z-index broken when using "ha-card-backdrop-filter" var in a theme
Mariusthvdb
commented
1 month ago this actually goes beyond the vertical-stack.
I can reproduce with 2 entities cards, where the top entities card contains the dropdown, it will not be visible over the second entities card, when using the ha-card-backdrop-filter:
with filter:
without:
ildar170975
commented
1 month ago vertical stack was only used to place two cards one by one.
Mariusthvdb
commented
1 month ago as I said, this goes beyond that. demonstrating it goes beyond the border of 2 core cards is rather relevant info.
btw, if this is for blurring background when more-info popups are shown, you can use:
card-mod-more-info-yaml: |
$: |
.mdc-dialog {
backdrop-filter: blur(17px) !important;
-webkit-backdrop-filter: blur(17px) !important;
}in a card-mod-theme and dont have the issue in the regular Dashboard
Nezz
commented
1 month ago This is the underlying issue:
The issue is caused by the backdrop-filter creating a new stacking context for each card. Since this is set on each card individually, the dropdown's z-index will not apply to other cards and they will end up getting drawn on top. https://github.com/Nezz/homeassistant-visionos-theme/issues/4
I can't really think of a way to work around this. Backdrop filters are problematic because they live in their own context that affects both z-index and positioning (see https://github.com/Nezz/homeassistant-visionos-theme/issues/2).
Checklist
Describe the issue you are experiencing
Hi there! Since i've updated to 2024.5 all my dropdown menu's drop below picture elements in the dashboard. I alwasys follow all updates and never seen this before.
Describe the behavior you expected
Dropdown list should fall over all elements on top.
Steps to reproduce the issue
What version of Home Assistant Core has the issue?
2024.5.1
What was the last working version of Home Assistant Core?
2024.4.4
In which browser are you experiencing the issue with?
All browsers, tabelets, HA apps, android, mac, ios
Which operating system are you using to run this browser?
OSx Sanoma 14.x
State of relevant entities
Problem-relevant frontend configuration
This is my dasboard card. (sorry long card due no remotecontrol card excist in HA).
``` type: vertical-stack cards: - type: horizontal-stack cards: - type: entity entity: sensor.time state_color: false - type: entity entity: sensor.date state_color: false - type: horizontal-stack cards: - type: entities entities: - input_select.select_device - type: entities entities: - entity: input_select.tv_kanaal - type: conditional conditions: - entity: input_select.select_device state: Show remote card: type: markdown content: >Javascript errors shown in your browser console/inspector
No response
Additional information
Issue is with all dropdowns. You can only test this whit a picture elements card below a dropdown.