⚪ Bubble Card - A minimalist card collection for Home Assistant with a nice pop-up touch

Seems the pop-up card has some issues with z-index. As soon as z-index is applied to any component, it will be visible through the pop-up. And it doesnt matter, if its z-index 1, 2, 3 …
That seemsbto be the issue some users have. Incl. me.

i had a similar issue, if possible: try to use the vertical view in page settings

1 Like

Hi, i am using also the horizontal button stack. On some mobile screens i just have few buttons in the stack so that just half of the screen is filled with buttons. In this case it would be nice to centrally align the buttons.

Is it possible to centralize the buttons in the horizontal stack somehow?

Yes, it appears to be an issue with the card. They have a z-index value specified for the circles of 2. This is putting it on top of the popup. I haven’t checked on their support yet to see if it’s been reported.


I really like the Bubble Card. Still new here trying to understand things.

I think issue arnocl mentioned is still present.

when pop-up opens I have this:

but when I interact with any button I get the above to change to :

any suggestions how to solve it ?

as no one is rising the issue it must be something I did wrong. No idea what :frowning:

Hi, welcome to the forum!

I can’t help you with that particular problem but let me at least help you with this: How to help us help you - or How to ask a good question => Format it properly, so you might get help

Hi! This issue should be finally fixed in the next release, a (huge) beta is coming!


Great. Thank you.

How do change the line color?

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
          action: toggle
          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 :blush:

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.

Screenshot 2024-03-20 at 18.18.53

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 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?

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!