Clooos
Can't get pop up in picture elements
Describe the bug
I'm try to make pop up with spotcast card and media player. I have the same code in "test" dashboard and I works but when I put it in picture element it looks like this:
https://github.com/Clooos/Bubble-Card/assets/164264394/43734b03-b46d-4117-8e5c-558ca3f35efa
In test dashboard it looks like this:
https://github.com/Clooos/Bubble-Card/assets/164264394/6f6e1ab4-b5b7-489b-9fc0-14ee5d1b78cf
Code:
type: picture-elements
elements:
- type: image
action: none
entity: sun.sun
state_image:
above_horizon: local/Dom/Parter/Dom-dzien-v20.png
below_horizon: local/Dom/Parter/Dom-dzien-v20.png
style:
height: 100%
left: 50%
top: 50%
width: 100%
- type: image
entity: switch.sterownik_salon_led_zyrandol_3
style:
top: 50%
left: 50%
width: 100%
mix-blend-mode: lighten
state_image:
'on': local/Dom/Parter/Dom-noc-salon-LED.png
'off': local/UI/Transparentne-v2.png
- type: image
entity: switch.sterownik_salon_led_zyrandol_2_2
style:
top: 50%
left: 50%
width: 100%
mix-blend-mode: lighten
state_image:
'on': local/Dom/Parter/Dom-noc-salon-zyrandol.png
'off': local/UI/Transparentne-v2.png
- type: image
entity: light.przelacznik_kanapa_tv_swiatlo
style:
top: 50%
left: 50%
width: 100%
mix-blend-mode: lighten
state_image:
'on': local/Dom/Parter/Dom-noc-salon-kanapa.png
'off': local/UI/Transparentne-v2.png
- type: image
entity: light.przelacznik_kanapa_tv_swiatlo_2
style:
top: 50%
left: 50%
width: 100%
mix-blend-mode: lighten
state_image:
'on': local/Dom/Parter/Dom-noc-salon-TV.png
'off': local/UI/Transparentne-v2.png
- type: image
entity: switch.led_blat
style:
top: 50%
left: 50%
width: 100%
mix-blend-mode: lighten
state_image:
'on': local/Dom/Parter/Dom-noc-kuchnia-LED.png
'off': local/UI/Transparentne-v2.png
- type: custom:mushroom-light-card
entity: switch.sterownik_salon_led_zyrandol_3
icon_type: entity-picture
icon: mdi:led-strip-variant
secondary_info: none
primary_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
style:
left: 70%
top: 55%
scale: 150%
card_mod:
style: |
ha-card {
border-radius: 8px;
background-color: transparent !important;
}
- type: custom:mushroom-light-card
entity: switch.sterownik_salon_led_zyrandol_2_2
icon_type: entity-picture
icon: mdi:chandelier
secondary_info: none
primary_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
style:
left: 70%
top: 35%
scale: 150%
card_mod:
style: |
ha-card {
border-radius: 8px;
background-color: transparent !important;
}
- type: custom:mushroom-light-card
entity: switch.led_blat
icon_type: entity-picture
icon: mdi:led-strip-variant
secondary_info: none
primary_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
style:
left: 65%
top: 82%
scale: 150%
card_mod:
style: |
ha-card {
border-radius: 8px;
background-color: transparent !important;
}
- type: custom:mushroom-light-card
entity: switch.double_switch_2_2
icon_type: entity-picture
icon: mdi:light-recessed
secondary_info: none
primary_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
style:
left: 26.5%
top: 62%
scale: 150%
card_mod:
style: |
ha-card {
border-radius: 8px;
background-color: transparent !important;
}
- type: custom:mushroom-template-card
primary: Garaż
secondary: '🌡️{{states(''sensor.czujnik_temperatury_garaz_air_temperature'')}}°C '
layout: vertical
fill_container: true
multiline_secondary: true
icon_color: orange
badge_color: red
entity: climate.garaz
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
style:
left: 91%
top: 17%
scale: 101%
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: black;
--card-secondary-color: black;
--card-primary-font-size: 20px;
--card-secondary-font-size: 17px;
height: 38px !important;
width: 100px !important;
}
style: |
ha-card {
background-color: white;
border-radius: 8px;
--primary-text-color: black;
--secondary-text-color:
}
ha-state-icon {
color: black !important;
}
- type: custom:mushroom-template-card
primary: Wiatrołap
secondary: >-
🌡️{{states('sensor.czujnik_temperatury_wiatrolap_air_temperature_2')}}°C
layout: vertical
fill_container: true
multiline_secondary: true
icon_color: orange
badge_color: red
entity: climate.wejscie
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
style:
left: 91%
top: 25%
scale: 101%
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: black;
--card-secondary-color: black;
--card-primary-font-size: 20px;
--card-secondary-font-size: 17px;
height: 38px !important;
width: 100px !important;
}
style: |
ha-card {
background-color: white;
border-radius: 8px;
--primary-text-color: black;
--secondary-text-color:
}
ha-state-icon {
color: black !important;
}
- type: custom:mushroom-template-card
primary: WC
secondary: '🌡️{{states(''sensor.czujnik_temperatury_wc_air_temperature_3'')}}°C '
layout: vertical
fill_container: true
multiline_secondary: true
icon_color: orange
badge_color: red
entity: climate.wc
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
style:
left: 91%
top: 33%
scale: 101%
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: black;
--card-secondary-color: black;
--card-primary-font-size: 20px;
--card-secondary-font-size: 17px;
height: 38px !important;
width: 100px !important;
}
style: |
ha-card {
background-color: white;
border-radius: 8px;
--primary-text-color: black;
--secondary-text-color:
}
ha-state-icon {
color: black !important;
}
- type: custom:mushroom-template-card
primary: Kuchnia
secondary: >-
🌡️{{states('sensor.czujnik_temperatury_kuchnia_air_temperature_4')}}°C
layout: vertical
fill_container: true
multiline_secondary: true
icon_color: orange
badge_color: red
entity: climate.kuchnia
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
style:
left: 91%
top: 41%
scale: 101%
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: black;
--card-secondary-color: black;
--card-primary-font-size: 20px;
--card-secondary-font-size: 17px;
height: 38px !important;
width: 100px !important;
}
style: |
ha-card {
background-color: white;
border-radius: 8px;
--primary-text-color: black;
--secondary-text-color:
}
ha-state-icon {
color: black !important;
}
- type: custom:mushroom-template-card
primary: Jadalnia
secondary: '🌡️{{states(''sensor.termostat_jadalnia_air_temperature'')}}°C '
layout: vertical
fill_container: true
multiline_secondary: true
icon_color: orange
badge_color: red
entity: climate.termostat_jadalnia
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
style:
left: 91%
top: 49%
scale: 101%
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: black;
--card-secondary-color: black;
--card-primary-font-size: 20px;
--card-secondary-font-size: 17px;
height: 38px !important;
width: 100px !important;
}
style: |
ha-card {
background-color: white;
border-radius: 8px;
--primary-text-color: black;
--secondary-text-color:
}
ha-state-icon {
color: black !important;
}
- type: custom:mushroom-template-card
primary: Salon
secondary: '🌡️{{states(''sensor.termostat_salon_air_temperature'')}}°C '
layout: vertical
fill_container: true
multiline_secondary: true
icon_color: orange
badge_color: red
entity: climate.termostat_salon
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
style:
left: 91%
top: 57%
scale: 101%
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: black;
--card-secondary-color: black;
--card-primary-font-size: 20px;
--card-secondary-font-size: 17px;
height: 38px !important;
width: 100px !important;
}
style: |
ha-card {
background-color: white;
border-radius: 8px;
--primary-text-color: black;
--secondary-text-color:
}
ha-state-icon {
color: black !important;
}
- type: custom:mushroom-template-card
primary: Odkurzacz
secondary: '{{states(''vacuum.viomi_v18_7846_robot_cleaner'')}}'
layout: vertical
fill_container: true
multiline_secondary: true
icon_color: orange
badge_color: red
entity: vacuum.viomi_v18_7846_robot_cleaner
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
style:
left: 91%
top: 67%
scale: 101%
card_mod:
style:
mushroom-state-info$: |
.container {
--card-primary-color: black;
--card-secondary-color: black;
--card-primary-font-size: 20px;
--card-secondary-font-size: 17px;
height: 38px !important;
width: 100px !important;
}
style: |
ha-card {
background-color: white;
border-radius: 8px;
--primary-text-color: black;
--secondary-text-color:
}
ha-state-icon {
color: black !important;
}
- type: custom:mushroom-chips-card
style:
left: 9%
top: 100%
scale: 100%
chips:
- type: entity
entity: sensor.symo_3_7_3_m_1_energia_z_dnia
icon_color: accent
card_mod:
style: |
ha-card {
--chip-background: white;
--text-color: black;
height: 38px !important;
width: 130px !important;
--chip-font-size: 15px;
}
- type: entity
entity: sensor.vscotho1_200_11_dhw_gas_consumption_today
icon: mdi:fire
icon_color: red
card_mod:
style: |
ha-card {
--chip-background: white;
--text-color: black;
height: 38px !important;
width: 130px !important;
--chip-font-size: 15px;
}
- type: custom:bubble-card
card_type: button
button_type: name
name: Spotify
icon: mdi:spotify
style:
left: 9%
top: 17%
width: 10%
scale: 90%
tap_action:
action: navigate
navigation_path: '#spotify1'
button_action:
tap_action:
action: navigate
navigation_path: '#spotify1'
card_layout: normal
styles: |2-
.bubble-button-card-container {
background: rgba(255,255,255,255.255) !important;
}
* {
--primary-text-color: black;
.bubble-icon {
color: white !important;
}
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#spotify1'
button_type: name
name: Spotify
icon: mdi:spotify
margin: 7px
width_desktop: 1000px
show_icon: true
- type: custom:spotify-card
known_connect_devices:
- id: e7d30216a50aacd45250d63d252aaeb587ae4b16
name: Salon
entity_id: media_player.salon
default_device: Salon
hide_chromecast_devices: true
hide_header: true
hide_playback_controls: true
- type: custom:bubble-card
card_type: media-player
force_icon: false
show_state: false
entity: media_player.salon
show_last_changed: false
show_attribute: false
show_icon: true
hide:
volume_button: false
card_layout: large
scrolling_effect: false
style:
top: 50%
left: 30%
- type: custom:stack-in-card
mode: horizontal
style:
left: 37%
top: 3%
width: 40%
scale: 100%
card_mod:
style: |
ha-card {
border-radius: 8px;
background-color: white;
--primary-text-color: black;
--card-mod-icon-color: black;
}
cards:
- type: custom:mushroom-template-card
primary: Parter
secondary: ''
icon: ''
fill_container: true
layout: vertical
tap_action:
action: navigate
navigation_path: /dashboard-nowy/parter
- type: custom:mushroom-template-card
primary: Piętro
secondary: ''
icon: ''
layout: vertical
fill_container: true
tap_action:
action: navigate
navigation_path: /dashboard-nowy/pietro
- type: custom:mushroom-template-card
primary: Taras
secondary: ''
icon: ''
layout: vertical
fill_container: true
tap_action:
action: navigate
navigation_path: /dashboard-nowy/taras
image: local/UI/Transparentne-v2.png
Test dash version:
- type: custom:bubble-card
card_type: button
button_type: name
name: Spotify
icon: mdi:spotify
tap_action:
action: navigate
navigation_path: '#spotify'
button_action:
tap_action:
action: navigate
navigation_path: '#spotify'
card_layout: normal
styles: |2-
.bubble-button-card-container {
background: rgba(255,255,255,255.255) !important;
}
* {
--primary-text-color: black;
.bubble-icon {
color: white !important;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#spotify'
button_type: name
name: Spotify
icon: mdi:spotify
margin: 7px
width_desktop: 1000px
show_icon: true
- type: custom:spotify-card
known_connect_devices:
- id: e7d30216a50aacd45250d63d252aaeb587ae4b16
name: Salon
entity_id: media_player.salon
default_device: Salon
hide_chromecast_devices: true
hide_header: true
hide_playback_controls: true
- type: custom:bubble-card
card_type: media-player
force_icon: false
show_state: false
entity: media_player.salon
show_last_changed: false
show_attribute: false
show_icon: true
hide:
volume_button: false
card_layout: large
scrolling_effect: false
Expected behavior
I want to picture elements version works like this one in my test dashboard
Informations (please complete the following information):
- OS: iOS, ubuntu
- Browser: safari, firefox, chrome
- Bubble Card version 2.0.4
- Home Assistant version 2024.6.3
Thank you! 🍻
Hi, I've never tried that use case, have you tried to put that pop-up at the very last position of your dashboard?
Hi, I've never tried that use case, have you tried to put that pop-up at the very last position of your dashboard?
Yes, tried same behavior. When action for pop-up all appears blurred in the background.
my fix for this was to hide the backdrop setting for the pop-up card type.
hide_backdrop: true
Although I did come here today hoping to find a fix haha. Only because it looks better to have the rest blurred out.
Hi, I've never tried that use case, have you tried to put that pop-up at the very last position of your dashboard?
I have the same issue. By looking in Chrome DevTools, it seems that the z-index of the bubble-backdrop behaves differently when the dashboard is in panel mode.
Oh, I've recently been playing with z-index in styles. Might a quick work around be something we can do there? I don't know enough about it to know if that would work, hoping you'd be able to tell me if that may be possible @Menelao147
Oh, I've recently been playing with z-index in styles. Might a quick work around be something we can do there? I don't know enough about it to know if that would work, hoping you'd be able to tell me if that may be possible @Menelao147
I don't know enough to change the z-index with styles either. I tried to change it directly from DevTools, but whatever value I tried, it had no effect. I tried to remove the panel mode, but the issue persists.
At this point, I think the problem is in the css nesting of the picture-elements
To all people can you have a look at this? https://github.com/Clooos/Bubble-Card/discussions/1027#discussioncomment-11627501
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 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. If you want to keep it open, please leave a comment. Thank you for your contributions.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}