I’ve been searching for a way to add a bubble card popup within another popup.
Until now I haven’t found a way to achieve this.
Is this possible or am I wasting my time (for now)?
Hey. I’m trying to change color of a switch (icon color as well) to change depending on state. As it currently is, it only affects the color when its off, when it’s on it’s just the standard yellow. What am I doing wrong? Would be great to know how to do the same thing for a slider as well.
- type: custom:bubble-card
card_type: button
entity: input_boolean.cinema_mode
name: Cinema
button_type: switch
tap_action:
action: toggle
hold_action:
action: more-info
show_state: true
icon: mdi:youtube-tv
styles: |
}
.switch-button {
background: ${state === 'on' ? '#fc9374' : '#e5e5e5'} !important;
}
Hey Abeksis,
May i know how did you add the persons up there? Are they just buttons ? I wonder how you are showing their location?
I’ve just been trying out popups and ran into so many bugs and display issues - multiple copies of cards within a vertical stack showing, popups only appearing for a fraction of a second and then disappearing, entering text in the name of a card making multiple cards show up in the preview, background blur overlay not stretching when the popup isn’t 100% wide.
Are these likely to be browser or code related? Firefox on Win 11.
Love the idea of this - exactly what I want but quite difficult to use currently.
Edit: after getting used to the quirks/bugs in the popup vertical stack, I just love this when you get it styled as you want. Really good 
I’ve managed to fix the color on switch based on state, but how to change the color of the icon to match the color of state as well? Make the icon bright purple as the rest of the switch.
Getting these two errors,
Uncaught error from Firefox 122.0 on Windows 10 TypeError: t.popUp is null updateBubbleCard/r< (/hacsfiles/Bubble-Card/bubble-card.js:520:1619)
Uncaught error from Edge 122.0.0.0 on Windows 10 TypeError: Cannot read properties of null (reading 'classList') /hacsfiles/Bubble-Card/bubble-card.js:520:1627
Any idea where to start the investigation?
Edit:
Thanks @Cloos
Is there a way to have the Horizontal buttons stack always in the foreground, so you don`t have to press back or the X to go to a other view?
But then one more question.
Is it possible to have the horizontal buttons stack color changed when a specific popup/button is active?
I would love to add these, because I am so used to that from my previous button navigation menu.
Quick question, using the bubble card switch for my door sensors as it’s very nice looking.
In other cards, I can click on them and see when doors were opened and closed. Is this possible with this card?
Is it possible to override the background color for icons? Like with the slider:
styles: |
.range-fill {
background: rgba(79, 69, 87, 1) !important;
}
Thanks for your work this. It looks amazing!
I’m starting from scratch and was wondering if it’s possible to link to the devices or integration page and have them show up in a pop-up?
I’d like to add a navigation bar, like the attached picture, with links to devices, entities, integrations, and automations without having to leave the dashboard. Sort of like an iframe, if you will.
Any help is greatly appreciated - thanks in advance!
1 Like
can you share the video?
Excellent channel
1 Like
What does the last icon link to?
It links to bubble card with my cameras
Got it. Do you know if it is possible to link to a bubble card that loads the devices or entities page?
Love this design, would it be possible to share your code please??
@agak79 Nice looking Simple Comfort Cards, have you seen my version in the post, changes colour according to the conditions?