Awesome, you’re a legend 
One thing I also noticed is that the “scroll down to close” feature is way to sensitive, so that the pop-up closes in 90% of the cases I just want to scroll on the page. Is there a way to change the sensitivity?
Perfect! Thanks for this. Now works as expected. Great!
One thing I noticed when in Kiosk-mode. The pop-ups won‘t go to totally to the top of the screen. Actually they stop where normally the header would be… but no longer is. Is there a way we can adjust this behaviour?
1 Like
Hi Cloos,
Thank’s for your reply. I downloaded v2.0.0-beta.12 just now, restaerted HA completly and unfortunatelly, when I click on the any button of the remote, pop up still hides right away. If you have any other suggestions, please let me know.
This is expected, you can change the “Top margin” for desktop and mobile by setting them to -56px, you can find these options in “Styling options” > “Pop-up styling”.
1 Like
I will add a new option to disable this behavior, as it is too complicated to fix for all available cards. This will be possible in the next release 
Perfect, thank you. You mean upcoming release, possibly today or the future one?
Today, I’ve just finished to add this feature
1 Like
Bubble Card 2 - First release candidate
If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.
Version 2.0.0-rc.1
Hi everyone!
After reviewing all your feedback on the previous beta, I can now confidently say that Bubble Card 2 is no longer a beta. It required a lot of work, and I’m extremely proud and relieved to finally be able to release the first release candidate!
I also have something to say to the Kiosk Mode (from NemesisRE) users. To ensure full compatibility, here are the steps to follow (I will add this to the v2 documentation):
-
First for your kiosk mode config, remove
hide_sidebard: trueorkiosk: trueand just keep that underkiosk_mode:kiosk_mode: hide_header: true -
Then go to your HA profile configuration then toggle this:
-
This will now works as expected.
New feature
- I’ve added the possibility to disable the « close by clicking outside » pop-up feature in the editor. You can change this behavior in YAML by adding
close_by_clicking_outside: false.
Bug fixes and optimizations
- Custom style templates are now updated correctly when added inside a pop-up.
- Fixed an issue where a pop-up was turning black when a dropdown was opened inside it. #521
- Added the missing default sensor icons. #543
- Fixed an issue where some cards were not displaying (outside of the editor) when added inside a pop-up. #491
- Changed the slide to close threshold from 300px to 400px because it was too sensitive.
As always, I can’t wait for your feedback!
Enjoy! 
4 Likes
Hey Cloos,
the “scroll to close” feature works as expected with the latest update but the bug with the dropdowns is still present.
Yes, of course.
The bug appears for all mushroom-select-cards.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
auto_close: '60000'
trigger_entity: binary_sensor.status_bewaesserung
trigger_close: false
name: Bewässerung
icon: mdi:sprout-outline
margin_top_desktop: 0p
shadow_opacity: '20'
bg_color: ''
bg_opacity: '88'
margin_top_mobile: '-30px'
is_sidebar_hidden: true
hash: '#Bewaesserung'
trigger_state: 'on'
button_type: state
entity: binary_sensor.status_bewaesserung
show_last_updated: true
hold_action:
action: more-info
tap_action:
action: more-info
button_action:
double_tap_action:
action: toggle
- type: custom:bubble-card
card_type: separator
name: Automatisierung
icon: mdi:checkbox-marked-circle-auto-outline
sub_button: []
- type: custom:scheduler-card
include:
- input_boolean.starter_bewaesserung_beet_mauer
- input_boolean.starter_bewaesserung_beet_zaun
- input_boolean.starter_bewaesserung_frischwasser
- input_boolean.starter_bewaesserung_rasen
- input_number.status_bewaesserung_beet_mauer_intensitaet
- input_number.status_bewaesserung_beet_mauer_vorrat_grenzwert
- input_number.status_bewaesserung_beet_mauer_vorrat_grenzwert_korrektur
- input_number.status_bewaesserung_beet_zaun_intensitaet
- input_number.status_bewaesserung_beet_zaun_vorrat_grenzwert
- input_number.status_bewaesserung_beet_zaun_vorrat_grenzwert_korrektur
- input_number.status_bewaesserung_rasen_intensitaet
- input_number.status_bewaesserung_rasen_vorrat_grenzwert
- input_number.status_bewaesserung_rasen_vorrat_grenzwert_korrektur
exclude: []
title: false
- type: custom:bubble-card
card_type: separator
icon: mdi:sprinkler
name: Beet Mauer
sub_button: []
- type: custom:bubble-card
card_type: button
icon: mdi:power
name: ''
sub_button:
- entity: input_boolean.automatisierung_bewaesserung_beet_mauer
icon: mdi:refresh-auto
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
entity: input_boolean.starter_bewaesserung_beet_mauer
show_last_changed: true
show_state: true
show_name: false
tap_action:
action: toggle
hold_action:
action: more-info
- square: true
type: grid
cards:
- type: custom:mushroom-template-card
primary: Vorrat
secondary: >-
{{states('sensor.status_bewaesserung_beet_mauer_vorrat') |round(1)}}
mm
icon: mdi:sprout-outline
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewaesserung_beet_mauer_vorrat
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: gepl. Dauer
secondary: >-
{{(states('sensor.status_bewaesserung_beet_mauer_dauer_geplant')|as_datetime).strftime('%H:%M:%S')}}
icon: mdi:timeline-clock-outline
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewaesserung_beet_mauer_dauer_geplant
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: gepl. Menge
secondary: >-
{{states('sensor.status_bewaesserung_beet_mauer_menge_geplant')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: teal
multiline_secondary: false
tap_action:
action: more-info
entity: sensor.status_bewaesserung_beet_mauer_menge_geplant
- type: custom:mushroom-template-card
primary: tägl. Anzahl
secondary: '{{states(''sensor.status_bewasserung_beet_mauer_anzahl_heute'')}}x'
icon: mdi:repeat
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewasserung_beet_mauer_anzahl_heute
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: tägl. Dauer
secondary: >-
{{((3600*(states('sensor.status_bewasserung_beet_mauer_dauer_heute') |
float()))|as_datetime).strftime('%H:%M:%S')}}
icon: mdi:clock-outline
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewasserung_beet_mauer_dauer_heute
tap_action:
action: more-info
- type: custom:swipe-card
parameters:
effect: flip
autoplay:
delay: 5000
disableOnInteraction: false
cards:
- type: custom:mushroom-template-card
primary: tägl. Menge Frischwasser
secondary: >-
{{states('sensor.status_bewaesserung_beet_mauer_menge_heute_bezug_frischwasser')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: teal
multiline_secondary: false
tap_action:
action: more-info
entity: >-
sensor.status_bewaesserung_beet_mauer_menge_heute_bezug_frischwasser
- type: custom:mushroom-template-card
primary: tägl. Menge Regenwasser
secondary: >-
{{states('sensor.status_bewaesserung_beet_mauer_menge_heute_bezug_regenwasser')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: teal
multiline_secondary: false
tap_action:
action: more-info
entity: >-
sensor.status_bewaesserung_beet_mauer_menge_heute_bezug_regenwasser
columns: 3
- type: custom:mushroom-number-card
entity: input_number.status_bewaesserung_beet_mauer_intensitaet
icon: mdi:signal
layout: horizontal
icon_color: teal
name: Intensität
fill_container: false
- type: custom:mushroom-select-card
entity: input_select.status_bewaesserung_beet_mauer_sensitivitaet_fuellstand
name: Sensitivität Füllstand
icon_color: teal
layout: horizontal
icon: mdi:waves-arrow-up
secondary_info: none
- type: custom:bubble-card
card_type: separator
icon: mdi:sprinkler
name: Beet Zaun
sub_button: []
- type: custom:bubble-card
card_type: button
icon: mdi:power
name: ''
sub_button:
- entity: input_boolean.automatisierung_bewaesserung_beet_zaun
icon: mdi:refresh-auto
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
entity: input_boolean.starter_bewaesserung_beet_zaun
show_name: false
show_state: true
show_last_changed: true
show_attribute: false
tap_action:
action: toggle
hold_action:
action: more-info
- square: true
type: grid
cards:
- type: custom:mushroom-template-card
primary: Vorrat
secondary: '{{states(''sensor.status_bewaesserung_beet_zaun_vorrat'') |round(1)}} mm'
icon: mdi:sprout-outline
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewaesserung_beet_zaun_vorrat
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: gepl. Dauer
secondary: >-
{{(states('sensor.status_bewaesserung_beet_zaun_dauer_geplant')|as_datetime).strftime('%H:%M:%S')}}
icon: mdi:timeline-clock-outline
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewaesserung_beet_zaun_dauer_geplant
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: gepl. Menge
secondary: >-
{{states('sensor.status_bewaesserung_beet_zaun_menge_geplant')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: teal
multiline_secondary: false
tap_action:
action: more-info
entity: sensor.status_bewaesserung_beet_zaun_menge_geplant
- type: custom:mushroom-template-card
primary: tägl. Anzahl
secondary: '{{states(''sensor.status_bewasserung_beet_zaun_anzahl_heute'')}}x'
icon: mdi:repeat
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewasserung_beet_zaun_anzahl_heute
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: tägl. Dauer
secondary: >-
{{((3600*(states('sensor.status_bewasserung_beet_zaun_dauer_heute') |
float()))|as_datetime).strftime('%H:%M:%S')}}
icon: mdi:clock-outline
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewasserung_beet_zaun_dauer_heute
tap_action:
action: more-info
- type: custom:swipe-card
parameters:
effect: flip
autoplay:
delay: 5000
disableOnInteraction: false
cards:
- type: custom:mushroom-template-card
primary: tägl. Menge Frischwasser
secondary: >-
{{states('sensor.status_bewaesserung_beet_zaun_menge_heute_bezug_frischwasser')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: teal
multiline_secondary: false
tap_action:
action: more-info
entity: >-
sensor.status_bewaesserung_beet_zaun_menge_heute_bezug_frischwasser
- type: custom:mushroom-template-card
primary: tägl. Menge Regenwasser
secondary: >-
{{states('sensor.status_bewaesserung_beet_zaun_menge_heute_bezug_regenwasser')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: teal
multiline_secondary: false
tap_action:
action: more-info
entity: sensor.status_bewaesserung_beet_zaun_menge_heute_bezug_regenwasser
columns: 3
- type: custom:mushroom-number-card
entity: input_number.status_bewaesserung_beet_zaun_intensitaet
icon: mdi:signal
layout: horizontal
icon_color: teal
name: Intensität
fill_container: false
- type: custom:mushroom-select-card
entity: input_select.status_bewaesserung_beet_zaun_sensitivitaet_fuellstand
name: Sensitivität Füllstand
icon_color: teal
layout: horizontal
icon: mdi:waves-arrow-up
secondary_info: none
- type: custom:bubble-card
card_type: separator
icon: mdi:sprinkler
name: Rasen
sub_button: []
- type: custom:bubble-card
card_type: button
icon: mdi:power
name: ''
sub_button:
- entity: input_boolean.automatisierung_bewaesserung_rasen
icon: mdi:refresh-auto
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
entity: input_boolean.starter_bewaesserung_rasen
show_name: false
show_state: true
show_last_changed: true
tap_action:
action: toggle
hold_action:
action: more-info
- square: true
type: grid
cards:
- type: custom:mushroom-template-card
primary: Vorrat
secondary: '{{states(''sensor.status_bewaesserung_rasen_vorrat'') |round(1)}} mm'
icon: mdi:sprout-outline
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewaesserung_rasen_vorrat
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: gepl. Dauer
secondary: >-
{{(states('sensor.status_bewaesserung_rasen_dauer_geplant')|as_datetime).strftime('%H:%M:%S')}}
icon: mdi:timeline-clock-outline
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewaesserung_rasen_dauer_geplant
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: gepl. Menge
secondary: >-
{{states('sensor.status_bewaesserung_rasen_menge_geplant')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: teal
multiline_secondary: false
tap_action:
action: more-info
entity: sensor.status_bewaesserung_rasen_menge_geplant
- type: custom:mushroom-template-card
primary: tägl. Anzahl
secondary: '{{states(''sensor.status_bewasserung_rasen_anzahl_heute'')}}x'
icon: mdi:repeat
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewasserung_rasen_anzahl_heute
tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: tägl. Dauer
secondary: >-
{{((3600*(states('sensor.status_bewasserung_rasen_dauer_heute') |
float()))|as_datetime).strftime('%H:%M:%S')}}
icon: mdi:clock-outline
layout: vertical
icon_color: teal
multiline_secondary: false
entity: sensor.status_bewasserung_rasen_dauer_heute
tap_action:
action: more-info
- type: custom:swipe-card
parameters:
effect: flip
autoplay:
delay: 5000
disableOnInteraction: false
cards:
- type: custom:mushroom-template-card
primary: tägl. Menge Frischwasser
secondary: >-
{{states('sensor.status_bewaesserung_rasen_menge_heute_bezug_frischwasser')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: teal
multiline_secondary: false
tap_action:
action: more-info
entity: sensor.status_bewaesserung_rasen_menge_heute_bezug_frischwasser
- type: custom:mushroom-template-card
primary: tägl. Menge Regenwasser
secondary: >-
{{states('sensor.status_bewaesserung_rasen_menge_heute_bezug_regenwasser')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: teal
multiline_secondary: false
tap_action:
action: more-info
entity: sensor.status_bewaesserung_rasen_menge_heute_bezug_regenwasser
columns: 3
- type: custom:mushroom-number-card
entity: input_number.status_bewaesserung_rasen_intensitaet
icon: mdi:signal
layout: horizontal
icon_color: teal
name: Intensität
fill_container: false
- type: custom:mushroom-select-card
entity: input_select.status_bewaesserung_rasen_sensitivitaet_fuellstand
name: Sensitivität Füllstand
icon_color: teal
layout: horizontal
icon: mdi:waves-arrow-up
secondary_info: none
- type: custom:bubble-card
card_type: separator
icon: mdi:water-pump
name: Wasserversorgung
sub_button: []
- type: custom:bubble-card
card_type: button
icon: mdi:power
name: ''
sub_button:
- entity: input_boolean.automatisierung_bewaesserung_bezug
icon: mdi:refresh-auto
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
- entity: input_boolean.status_bewaesserung_frischwasser
icon: mdi:cable-data
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
entity: input_boolean.starter_bewaesserung_wasserversorgung
show_name: false
show_state: true
show_last_changed: true
tap_action:
action: toggle
hold_action:
action: more-info
- square: true
type: grid
cards:
- type: custom:mushroom-entity-card
entity: sensor.bewaesserung_pumpe_power
name: aktuell
icon_color: blue
layout: vertical
- type: custom:mushroom-entity-card
entity: sensor.bewaesserung_pumpe_energy
name: gesamt
icon_color: blue
layout: vertical
columns: 3
- type: custom:mushroom-select-card
entity: input_select.status_bewaesserung_bezug
name: Bezugsquelle
icon_color: blue
layout: horizontal
icon: mdi:source-fork
secondary_info: none
- type: custom:bubble-card
card_type: separator
icon: mdi:storage-tank-outline
name: Wassertank
- square: true
type: grid
cards:
- type: custom:mushroom-template-card
primary: Füllstand
secondary: >-
{{states('sensor.status_bewaesserung_wassertank_fuellstand')
|round(0)}} %
icon: mdi:waves
layout: vertical
icon_color: blue
multiline_secondary: false
entity: sensor.status_bewaesserung_wassertank_fuellstand
tap_action:
action: more-info
hold_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.status_auswahl_fuellstand
card_mod:
style: |
ha-card {
height: 110px !important;
{% if states('input_boolean.status_auswahl_fuellstand') == 'on' %}
border: 1px solid silver {% endif %}
}
- type: custom:mushroom-template-card
primary: verbl. Menge
secondary: >-
{{states('sensor.status_bewaesserung_wassertank_menge_verbleibend')|round(1)}}
L
icon: mdi:water-circle
layout: vertical
icon_color: blue
multiline_secondary: false
tap_action:
action: more-info
entity: sensor.status_bewaesserung_wassertank_menge_verbleibend
columns: 3
Hi Cloos,
Thanks for all the hard work. Appreciate the effort! Sadly enough my popup with the custome remote card still closes when taping on any remote button. And I wanted to add that this behavior is only when tap on remote button if that wasn’t cleaer before. Problem does not exist when i click on other buttons nor any part of the popup. Let me maybe share my code in case this helps.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#livingroom'
name: Livingroom
icon: mdi:sofa
close_on_click: false
close_by_clicking_outside: false
- type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:chandelier
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
entity: switch.livingroom_ceiling_lights
show_state: false
icon: phu:chandelier
name: Lights
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:bubble-card
card_type: button
entity: switch.livingroom_rgb_lights
icon: phu:chandelier
name: Lights RGB
sub_button:
- entity: light.kanlux_s_a60_115we27_rgbcct
- entity: light.kanlux_s_a60_115we27_rgbcct_2
tap_action:
action: toggle
hold_action:
action: more-info
columns: 2
- type: custom:bubble-card
card_type: separator
name: Lamps
icon: mdi:lamps
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
entity: switch.livingroom_floor_lamp_socket
name: Floor lamp
icon: mdi:floor-lamp-torchiere
sub_button:
- entity: light.yeelight_color_livingroom1
show_attribute: false
tap_action:
action: toggle
hold_action:
action: more-info
- type: custom:bubble-card
card_type: button
entity: switch.ambilight_socket
name: Ambilight
icon: mdi:television-ambient-light
tap_action:
action: toggle
hold_action:
action: more-info
columns: 2
- type: custom:bubble-card
card_type: separator
name: TV remote
icon: mdi:remote-tv
- type: custom:mini-media-player
entity: media_player.samsung_livingroom
artwork: cover
source: icon
sound_mode: icon
- buttons:
back:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgCMAI+UEjcTNxI3EhMSExITEhMRFBE4EjcSOBITExISEhQREhMTEhITERMSOBI3EhMSOBISEjgSNxM3ExITEhI3EhMSNxMABgCVkxM2EjgTNhMSExISFBETEhISOBI3EjgTEhMSEhISExMSEhMSEhITEjgSNxITEjgSEhI4EjcSOBMTEBMTNxEUEzYSAA0FAAAAAAAAAAAAAAAA
bottom:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgCMAI+UEjcTNxM2ExISExITEhMSEhI4EjcSOBITEhMRExITEhMSNxMSEhMSExITEjcSOBISExISOBI3EjgSNxITEhMSNxMABgCUlBM2EjgSNxMSEhMSExISEhMSOBM2EjgSExISEhMSExITEjcUERITEhMSEhI4EjgSEhITEjgTNhI4EjcSExITEjcSAA0FAAAAAAAAAAAAAAAA
zero:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIZMTEhM3EzcTEhMSEhMSEhM4EhITNxM3EzcTEhMSExITEhMSExITEhMSExITEhMSExITNxM3EzcTNxM3EzcSOBM3EgANBQ==
one:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIJQTEhI4EjgSEhMSExITEhM3ExITNxM3EzcTEhMSExITEhM3ExITEhMSExITEhMSExITEhM3EjgSOBI4EzYTNxM3EwANBQ==
two:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIJQSEhM3EzcTEhMSExITEhM3ExITNxM3EzcTEhMSExITEhMSEzcTEhMSExITEhMSEhMSNxMSEzcTNxM4EjcTNxM3EwANBQ==
three:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIZMTEhM3EzcTEhMSExITEhM3ExITNxI3EzcTEhMSExITEhM3EzcTEhMSExITEhMSExITEhMSEzcTNxM3EzcTNxM3EwANBQ==
four:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIZMTEhM4EjgSEhMSExITEhI4ExISOBI3EzcTEhMSExITEhMSExITNxMSExITEhMSExITNxM3ExITNxM3EzcTNxM3EwANBQ==
five:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIZMTEhM3EjgSExITEhITEhM3ExITNxM3EzcTEhMSExITEhM3ExITNxMSExITEhMSExITEhM3ExITNxM3EjgSOBI4EgANBQ==
six:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIZMTEhM3EzcTEhMSExITEhM3FBETNxM3EzcTEhITEhMSExITEjgSNxMSExITEhMSExITNxMSExITNxM3EzcTNxM3EwANBQ==
seven:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIZMTEhM3EzcTEhMSExITEhM3ExITNxM3EzcSExITEhITEhM3EzcTNxMSExITEhMSExITEhMSExITNxM3EzcTNxM3EwANBQ==
eight:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIZMTEhM3EjgSExITEhITEhM3ExITNxM3EzcTEhMSExITEhMSExITEhM3ExITEhMSExITNxM3EzcTEhI4EjgSNxM3EwANBQ==
nine:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIpITEhM3EzcTEhMSExITEhM3ExITNxM3EzcTEhMSExITEhM3ExITEhM3EhMSEhMSExITEhM3EzcTEhM3EzcTNxM3EwANBQ==
exit:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgCMAI+TEzgRNxI4EhMSEhITExISExI3EjgSNxITEhMSExITEhMROBITETgSNxMSEjgTEhISEhMSOBISExITNxISEzcTNhMABgGSlRI4EjcSNxQRExMRExITEhMROBI3EjgSEhITEhMSFBETETgSExI3EjgSExI3EhQRExITETgSFBETETgTEhI3EjgSAA0FAAAAAAAAAAAAAAAA
info:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBQAAABJpMTEhM3EjcTEhMSExETEhM3ExISNxM3EzcTERMSExITEhI3EzcSExISEjgTEhMREhMSExMREzcTNxMSEjcTNxM3EgAFYwABJ0oTAA0FAAAAAAAAAAA=
left:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgCMAI+UEzcSNxI4EhISExITEhMSExI3EzcSNxQREhMSExETEhMSOBISEjgSExISEjgTNxISEhMSOBMREjgSNxMSEhMSOBIABgCVkxM2EjgSNxITEhMTExETERMSOBI3EjgTEhMSERMSExITEjcTEhM3EhITEhI4EzYSExMSEzYSExI4EzYSExITEjcSAA0FAAAAAAAAAAAAAAAA
menu:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgCMAI6UEzcSNxM3EhMTEhISExISExI4EjcSOBISEhMSExITEhMSEhI4ExISNxM3EhITEhITEjgSEhI4ExISEhI4EjcTNxIABgCUlBI4EjcSOBITEhISExITEhMSNxI4EjcSExMSEhMSEhITERURNxMSEjgSNxITEhMSExI3ExISNxMSEhMSOBI3EjgSAA0FAAAAAAAAAAAAAAAA
mute:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBQAAABIZMTEhITEhITExEUEhITNxM2EjgTNxI3EjgSOBM2EhMSEhMTEjcTEhITEhITEhIUETgSNxMSEjgTNxI3EjcUNxISEwAFHgABI0oSAA0FAAAAAAAAAAA=
ok:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgCMAI+UEzcSNxI4EhMSEhMSEhMSExI3EjgTNhMSEhMSExITExETEhITEhMSNxITEjgSNxITEjcTNxI4EhITNxITEhMSNxIABgCUlBM3EjcSOBMSEhMSEhITEhMSNxI4EjcTEhITEhMSExETEhMSExITEjcTEhI4EjcSExM2EzcSNxITEjgSExISEjgSAA0FAAAAAAAAAAAAAAAA
power:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgAYAY2TEzcTNxM3ExITEhMSExITEhM3FDYTNxMSExITEhMSExISExI4EjgSExITEjcTNxM3EzcTEhMSEzcTNxMSExITEhMABeOTkxM3EzcTNxMSExITEhMSExITNxM3EzcSExITEhITEhMSExITNxM3ExITEhM3EzcTNxM3ExITEhM3EzcTEhMSExITAAXjk5MTNxQ3EjcTEhMSEhMSExISEzgSNxM3ExITEhMSExITEhMSEzcTNxMSExITNxM3EzcTNxMSExITNxM3EhMSExITEgAF45OTEzcTNxM3ExITEhMSExITEhM3EzcTNxMSExITEhMSExITEhM3EzcTEhMSEzcSOBM2EzcTEhMTEjcTNxMSExITEhMADQU=
right:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgCMAI+UEjcSOBI3EhMSExISExITEhI3EzcSOBISEhMSExITEhMSEhI4EhMSEhITEjgSNxITEjgSEhI4EjcSOBITEhITNxMABf+VkxI4EjcSOBMSEhISExITEhMSNxI4EzYTEhMSExISEhITEhMTNxISEhMSExI3EjgSExM2ExITNxI3EjgSEhITEjgSAA0FAAAAAAAAAAAAAAAA
source:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBGAJOUEjgSOBI4EhMSExITEhMSExI4EjgSOBITEhMSExITEhMSOBITEhMSExITEhMSExITEhMSOBI4EjgSOBI4EjgSOBIADQUAAA==
top:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgCMAI+UEzcTNhI4ExETEhMSEhMSExI3EjgSNxMSEhMSExISEhMSExITERQSEhITEjgSNxITEjcSOBI3EzcSOBISEhMSOBMABf+UlBI3EjgSNxMSEhMSExITEhISOBI3EzcSExITEhISExITEhMSExISEhMSExI3EjgSExI3EzcSNxI4EzYTEhITEjcTAA0FAAAAAAAAAAAAAAAA
volmin:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBQAAABIpITEhIUERMUERITEhITNxI4EjcTNxI4EjcTNxM2EhQRExQ2EhIUERITExITEhITEjgRExI4EjcTNxI4EjcTNxMRFAAFGgABJ0kSAA0FAAAAAAAAAAA=
volplus:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBQAAABIZMTEhITEhMSExITEhITNxI4EjcTNxI3EjgTNxI3EhMSExM3EhITNxITEjgSEhMSEjcTExI3ExISNxMSEjgTNxISEwAFGgABJ0oSAA0FAAAAAAAAAAA=
channelup:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIZMTEhM3EzcTEhITEhITEhM3ExITNxM3EzcTEhMSExITEhMSExITEhMSEzcTEhMSExITNxM3EzcTNxMSEzcSOBI4EgANBQ==
channeldown:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBIAAABIJMTEhM3EzcTEhMSExITEhM3ExITNxM3EzcSEhMSExITExISEzcTEhM3EzcTEhMSExITNxMSEzcTEhMSEzcTNxM3EwANBQ===
guide:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgCMAJSTEjcSNxI4EhISExITEhISExI3EjcSNxMSEhMSEhITEhMSNxI3EjcSNxMSEhMSNxITEhISExITEhISNxI3ExISNxIABfuTlBI3EjcSNxITEhMSEhITEhMROBI3EjcSExITERMSExISEjgROBI3EjcSExITETgSEhITEhMRExITEjcSNxITEjcSAA0FAAAAAAAAAAAAAAAA
fastforward:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBGAJSVDzsQOhA6EBURFA8WERQSExA6EjgQOhAVEBUQFREUEBUQFREUEBUROREUEhMQOhAVEDoRORE5ERQRORE5EhMSOBEADQUAAA==
rewind:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBGAJOUDzsPOxA6EBURFBAVEBYOFg87EDoQOhEUDxYPFg8WDxYQOhAVDzsQFQ8WEhMQOhAVEBURORAVETkRORE5ERQQOhEADQUAAA==
play:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBGAJOUETkRORA7EBUQFRAVEBUQFQ87DzsPOw8WEBUQFRAVEBUPOxA6EDoRFBEUEBURORAVEBURFBEUEDoRORE5ERUPOw8ADQUAAA==
pause:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBGAJKVETkQOhA6EhMQFREUERQQFRA7DzsQOhAVEBUPFhAVDxYQFRE5EBUQOhAVERQROREUETkQFRE5ERQQOhA6EBUQOhAADQUAAA==
lastch:
call: remote.send_command
data:
entity_id: remote.rm_mini_3_remote
command: >-
b64:JgBQAAABIZMTEhM3EjcTEhMSEhITEhM3ExETNxM3EzcTEhISExITEhI3EzcTOBISEhITNxMSExETEhMSExISNxM3ExITNxI3EwAFaAABJEgTAA0FAAAAAAAAAAA=
name: Samsung
remote_template: samsungtv
style: |
ha-card {
font-size: 10px;
}
h1{
text-align:left;
margin-left: 50px;
}
type: custom:generic-remote-control-card
Even if I don’t see why, is it by any chance possible that your remote card is changing the URL? That would explain why the pop-up is closing.
And also have you refreshed the page before testing this again?
Congratulations on the RC milestone @Cloos. I can only imagine how much time and effort goes into a project like this. When individuals produce an experience that is superior to what large companies with whole teams behind them sometimes produce it says volumes.
1 Like
@Cloos, I did refresh the card, even restarted HA. I don’t think it changes the URL, but please let me know how I can check that.
My popup card is tied to a chip card (room card). Both room chip card and popup card are in the same dashboard view.
and here is the code for that chip card:
type: custom:button-card
name: Living room
icon: mdi:sofa
entity: sensor.living_room_temperature
tap_action:
action: navigate
navigation_path: '#livingroom'
custom-fields:
arrow: |
[[[
return `<ha-icon
icon="mdi:chevron-right"
style="width:16px; height: 16px;">
</ha-icon>`
]]]
show_label: false
show_state: true
styles:
grid:
- grid-template-areas: '"i n arrow" "i s arrow"'
- grid-template-columns: 60px 1fr 40px;
icon:
- width: 24px
- color: black
img_cell:
- background: beige
- border-radius: 200px
- width: 50px
- height: 50px
name:
- justify-self: start
- font-size: 14px
- font-weight: 500
- paddong-left: 10px
state:
- justify-self: start
- font-size: 14px
- paddong-left: 10px
- opacity: '0.7'
card:
- margin: 0
- border-radius: 50px
- padding: 12px 14px 12px 8px
custom_fields:
arrow:
- justify-self: end
- font-size: 14px
- opacity: '0.7'
And just to be sure, is the pop-up still closing when you click outside of it?
No, it does not. I changed it to false after your latest release.
I’ve seen that in your YAML indeed, I just wanted to be sure that it was working because the only things that can now close your pop-up are the close button and the slide to close feature (I haven’t added the possibility to disable this one).
But I will take a closer look at that issue!
1 Like
Hi! I’m currently working on the v2 documentation and I’m adding as many examples as possible. With my tests, I realized that since v2.0.0-beta.9, it’s now possible to create templates for all the texts in Bubble Card!
I know that this is a feature many people have been wanting.
This one is changing a button name with “It’s currently sunny” depending on your weather.
styles: |
${card.querySelector('.bubble-name').innerText = "It's currently " + hass.states['weather.home'].state}
Edit: I’ve just finished the v2 documentation, everything should be now covered and I’ve added a lot of examples, especially in the styling and style templates section.
3 Likes