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

Thanks
Got it working :sweat_smile:

  • Reboot (from power off)
  • Reinstalled BubbleCard (didn’t fix)
  • Changed (completely new) new Rources Hacstag number again by incrementing this new one by one digit)
  • restarted HA in safe mode (just trying different things - no idea if this was necessary)
  • Then restarted HA again & working
    Thanks for your help and ALL the impressive coding you are doing - really appreciate you helping an ol retired bloke when in need - aporeciated!!
    Cheers
1 Like

To reliably fix this, got to HACS and revert back to version 2.4.
Then:

  1. clear browser cache
  2. Goto to Developer tools > Tab “Actions” and select “Home Assistant Frontend: Realead themes”
  3. Do a full restart of Home Assistant

After the restart:

    • Go to HACS and do the update to the latest bubble-card beta (IE v3.0-0-beta 6)

Then, it’ll probably work. It did on my install during all beta’s to 3.0 when I got those errors.

2 Likes

For me, that solution never worked on my installation of HA and bubble-card when I encountered these problems.
You’ll find my solution above to fix this, which works in 100% of the cases in my 2 home assistant installations

2 Likes

I ve got a issue since updating to 3.0 beta 6

Normaly my climate card is based on mode (for example dry) purple. Since the update its only orange.

With 2.4 it works but the select button is out of function.

Here s my code for styling:

Is there a way to fix it i cant see?

It is only on dry an fan mode. The rest works fine.

.bubble-icon-container {
      background: ${hass.states['climate.midea_ac_152832116584910'].state === 'heat' ? '#FF9E53' :  
                  hass.states['climate.midea_ac_152832116584910'].state === 'cool' ? '#5293B4' : 
                  hass.states['climate.midea_ac_152832116584910'].state === 'fan_only' ? '#7B9175' : 
                  hass.states['climate.midea_ac_152832116584910'].state === 'dry' ? '#8a64b0'  : 
                  hass.states['climate.midea_ac_152832116584910'].state === 'auto' ? '#3eb5a1' :
                  ''} !important; 
}

.bubble-climate {
      border-radius: 100px !important;
      background-color: ${hass.states['climate.midea_ac_152832116584910'].state === 'heat' ? '#ff7b18' : 
                        hass.states['climate.midea_ac_152832116584910'].state === 'cool' ? '#3A6D8C' :
                        hass.states['climate.midea_ac_152832116584910'].state === 'fan_only' ? '#66785F' :
                        hass.states['climate.midea_ac_152832116584910'].state === 'dry' ? '#61487a'  : 
                        hass.states['climate.midea_ac_152832116584910'].state === 'auto' ? '#3a8c7e' :
                        ''} !important; 
  }

  .bubble-sub-button-1 {
      background: ${hass.states['climate.midea_ac_152832116584910'].state === 'heat' ? '#FF9E53' :
                  hass.states['climate.midea_ac_152832116584910'].state === 'cool' ? '#5293B4' :
                  hass.states['climate.midea_ac_152832116584910'].state === 'fan_only' ? '#7B9175' :
                  hass.states['climate.midea_ac_152832116584910'].state === 'dry' ? '#8a64b0'  : 
                  hass.states['climate.midea_ac_152832116584910'].state === 'auto' ? '#3eb5a1' :
                  ''} !important;
  }

  .bubble-sub-button-2 {
      background: ${hass.states['climate.midea_ac_152832116584910'].state === 'heat' ? '#FF9E53' :
                  hass.states['climate.midea_ac_152832116584910'].state === 'cool' ? '#5293B4' :
                  hass.states['climate.midea_ac_152832116584910'].state === 'fan_only' ? '#7B9175' :
                  hass.states['climate.midea_ac_152832116584910'].state === 'dry' ? '#8a64b0' :
                  hass.states['climate.midea_ac_152832116584910'].state === 'auto' ? '#3eb5a1' :
                  ''} !important;
  }

Confirming with Beta 3.6 I too note my previously working climate card partly fails now. Specifically the sub-button ‘mode’ when tapped (either of three tap options) does not respond. Curiously Temperature + or minus do work (although not a sub-button).

  1. Checked Card config - the ‘Tap action on button’ editor also inoperative, ie shows but is grey and does not respond (so can not be edited).
  2. Tried for completeness to create a new bubblecard for same Air-conditioner, in summary same symptom - the ‘Tap action on button’ editor also inoperative.

Edit Update 1 - same symptom with second sub-button on another of my Climate devices.
Update 2: my card_type: button cards are working as expected (ie: sub-buttons work)

will Check other Bubble Cards for expected operation.


In your screenshot I see that you don’t have the correct version (the text under the sub-buttons have changed), you need v3.0.0-beta.6 for your select sub-buttons to work.

I suspect the good old HACS update issue :sweat_smile:

Edit: And the tap action can’t be changed on a select sub-button, because taping on it is for opening the dropdown.

1 Like

I will check that, thank you for the feedback!

Hello @Cloos

I have a problem
i add sub button for selected source list for my apple Tv

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#tvapple"
    name: Apple TV
    icon: phu:apple-tv-box
    is_sidebar_hidden: true
    styles: |-
      .bubble-pop-up-container {
        --vertical-stack-card-gap: 0px!important;
      }
      .bubble-sub-button {
        font-weight: bold;
        font-size: 12px;
      }
      #header-container > div > div {
        background: var(--gray200)!important;
      }
      #header-container > button {
        background: none;
      }
      .icon-container {
        background-color: var(--gray800)!important;
      }
      .icon-container > ha-icon {
        color: var(--gray000)!important;
        opacity: 1!important;
      }
      .bubble-icon {
        --mdc-icon-size: 22px !important;
      }
    bg_blur: "20"
    shadow_opacity: "20"
    bg_opacity: "45"
    margin_top_mobile: 50px
    margin_top_desktop: 50px
    card_layout: large
    sub_button:
      - entity: media_player.apple_tv
        select_attribute: source_list
        show_arrow: true
        show_icon: false
        state_background: true
        show_background: false

but when i click on arrow nothing happens…

i check states for my apple tv and “source_list” is available

source_list:
  - "App\_Store"
  - Arcade
  - CANAL+
  - Disney+
  - Films
  - Forme
  - france•tv
  - Infuse
  - Musique
  - Netflix
  - OQEE by Free
  - Ordinateurs
  - Photos
  - Plex
  - Podcasts
  - Prime Video
  - Rechercher
  - Réglages
  - Spotify
  - "Séries\_TV"
  - TF1+
  - TV
  - VLC
  - Winter Fireplace
  - YouTube
  - Événements Apple
media_content_id: "41200528_50889"
media_content_type: video
media_duration: 2569
media_position: 61
media_position_updated_at: "2025-05-13T12:42:02.550780+00:00"
media_title: The Last of Us - Saison 2
media_artist: "Episode 5 : Ressentez son amour"
app_id: com.canalplusdistrib.mycanal.prod
app_name: CANAL+
icon: phu:apple-tv-box
friendly_name: Apple TV
supported_features: 450487

i use HA 2025.5 and 2.4.0 Bubble Card

This didn’t work for me the first time but it finally worked for me the second time; I think I had to do a full restart, instead of a quick restart, for it to finally work.

You are totally right… My wording in this comment was wrong.
I changed it to reflect the needed change.

Hello guys and @Cloos

Seems work with beta : v3.0.0-beta.6

But i have a new problem with css code

.bubble-pop-up-container {
  --vertical-stack-card-gap: 0px!important;
}
.bubble-sub-button {
  font-weight: bold;
  font-size: 12px;
}
#header-container > div > div {
  background: var(--gray200)!important;
}
#header-container > button {
  background: none;
}
.icon-container {
  background-color: var(--gray800)!important;
}
.icon-container > ha-icon {
  color: var(--gray000)!important;
  opacity: 1!important;
}
.bubble-icon {
  --mdc-icon-size: 22px !important;
}

I have correctly set “header-container > button” to “none”

#header-container > button {
  background: none;
}

But I still have a background on my close button

Am I doing something wrong?
It worked with version:: 2.4.0

Thanks in advance to anyone who can help me.

EDIT :

My bad i add :

}
.bubble-close-button {
background: none !important;

alle is good

1 Like

Thanks - correct on all points. Working now

1 Like

Bubble Card 3

v3.0.0-beta.7

If you missed the previous beta releases, please check this changelog (and earlier ones) to discover all the new features and fixes added so far.

Hi everyone!

Here is (again) a new beta that fixes several bugs that were reported, including one that could completely freeze the dashboard and prevent any cards from rendering on some browsers!

There’s also a small behavior change on light sliders: it is now limited to 1%, matching Home Assistant’s slider behavior. If you liked the old behavior, you can toggle it back in the editor or in YAML (more info below).

I still have a few issues left on my to-do list before the stable release, but I’m definitely starting to see the light at the end of the tunnel!

Thanks again for being part of this journey and helping push Bubble Card forward, one beta at a time! :heart:


:bulb: New features and enhancements

  • Improved light slider behavior
    Hold-to-slide sliders now stop at 1% by default, matching Home Assistant’s slider behavior.
    To restore the old behavior, I’ve added an option in the editor in the “Slider settings”. In YAML you can set allow_light_slider_to_0: true. #1295

:heavy_check_mark: Bug fixes and improvements

  • Fixed dashboard not rendering on some devices
    This critical issue is now resolved! Thanks to everyone who helped track it down! #1461 #1462 #1476

  • Pop-up backdrop color customization works correctly again
    Customizing the backdrop color with --bubble-backdrop-background-color has been fixed. #1294

  • Relative time formatting now matches Home Assistant’s format
    Timestamps like “3 hours ago” are now properly rounded. #1228

  • Fixed slider bugs with custom min/max/step values
    Sliders now behave correctly when these values are set. #1478

  • Sliders now update correctly when changed externally
    Previously, if you used a slider and then changed the entity’s state from somewhere else (like Google Assistant), the slider wouldn’t reflect the new value. This is now fixed! #1367

  • Fixed inconsistent sub-button color on sliders
    Even if I’m still unsure this is really fixed :sweat_smile: #1448

  • All buttons are now hidden when an entity is unavailable
    For example, media player or cover controls will fully hide when the entity is unavailable. #1453


How to test this beta?

Go to HACS, search for Bubble Card, and click on it. Then, click the three dots icon in the top-right corner and select “Redownload”. You’ll be able to choose the beta version under “Need a different version?”. You can then change back to your previous version if needed.

Also, make sure to clear your browser or app cache, you can also check this if the new version doesn’t load properly.

Open Bubble Card on Home Assistant Community Store (HACS).

2 Likes

Re dashboard not rendering on some devices - what kind of devices? I have an nspanel pro hacked running fully kiosk browser that stopped loading dashboards a few days, maybe a week ago. Wondering if that’s the issue.

That’s a lot possible, this issue was introduced in v3.0.0-beta.5, so give it a try :slightly_smiling_face:

Now I have beta 7 loaded it fixed it :slight_smile:

I was going nutty trying to work out what was happening and nearly bought a new device! All good now.

1 Like

since the new release of ha my climate have no function anymore ? anyone else same problem? or is something wrong with my setup

type: custom:bubble-card
card_type: climate
entity: climate.esszimmer
sub_button:
  - entity: climate.esszimmer
    select_attribute: swing_modes
    icon: mdi:air-filter
    show_arrow: false
    name: Lamelle
  - entity: climate.esszimmer
    select_attribute: fan_modes
    show_arrow: false
  - name: HVAC modes menu
    state_background: false
    show_arrow: false
    tap_action:
      action: toggle
    icon: mdi:power
    select_attribute: hvac_modes
    show_background: true
    show_icon: true
icon: mdi:air-conditioner
name: Esszimmer
show_state: true
show_attribute: true
force_icon: false
state_color: true
card_layout: large
attribute: current_temperature
styles: |-
  .bubble-icon {
      color: ${state === 'on' ?  '#FFAF45' : '#ffffff'} !important;
      animation: ${state === 'on' ? 'rotate 2s linear infinite' : 'none'}; /* Drehen aktivieren */
  }

  .bubble-icon-container {
      background: ${hass.states['climate.esszimmer'].state === 'heat' ? '#FF9E53' :  
                  hass.states['climate.esszimmer'].state === 'cool' ? '#5293B4' : 
                  hass.states['climate.esszimmer'].state === 'fan_only' ? '#7B9175' : 
                  hass.states['climate.esszimmer'].state === 'off' ? '#212531' : 
                  '#91AC8F'} !important; 
  }

  .bubble-climate {
      border-radius: 10px !important;
      background-color: ${hass.states['climate.esszimmer'].state === 'heat' ? '#ff7b18' : 
                        hass.states['climate.esszimmer'].state === 'cool' ? '#3A6D8C' :
                        hass.states['climate.esszimmer'].state === 'fan_only' ? '#66785F' :
                        '#252a38'} !important; 
  }

  .bubble-sub-button-1 {
      background: ${hass.states['climate.esszimmer'].state === 'heat' ? '#FF9E53' :
                  hass.states['climate.esszimmer'].state === 'cool' ? '#5293B4' :
                  hass.states['climate.esszimmer'].state === 'fan_only' ? '#7B9175' :
                  '#212531'} !important;
  }

  .bubble-sub-button-2 {
      background: ${hass.states['climate.esszimmer'].state === 'heat' ? '#FF9E53' :
                  hass.states['climate.esszimmer'].state === 'cool' ? '#5293B4' :
                  hass.states['climate.esszimmer'].state === 'fan_only' ? '#7B9175' :
                  '#212531'} !important;
  }


  .bubble-sub-button-3 {
      background: ${hass.states['climate.esszimmer'].state === 'heat' ? '#FF9E53' :
                  hass.states['climate.esszimmer'].state === 'cool' ? '#5293B4' :
                  hass.states['climate.esszimmer'].state === 'fan_only' ? '#7B9175' :
                  '#212531'} !important;
  }

  .bubble-temperature-container {
      background: ${hass.states['climate.esszimmer'].state === 'heat' ? '#FF9E53' :
                  hass.states['climate.esszimmer'].state === 'cool' ? '#5293B4' :
                  hass.states['climate.esszimmer'].state === 'fan_only' ? '#7B9175' :
                  '#212531'} !important;
  }

  ha-card {
    --bubble-select-list-background-color: #252a38 !important;
    --bubble-list-item-accent-color: #212538 !important;
  }
tap_action:
  action: none
double_tap_action:
  action: none
hold_action:
  action: none
columns: 4

Assuming you are referring to beta 7?
If so my AC cards working fine so I doubt it’s the release. Perhaps be more specific what’s not working?

no not beta bubble card v 2.4.0 with latest HA Update
the sub buttons seems not to work only for air conditioner HVAC Modes and fan speed , there is no popup of the modes anymore by tap on it

I think (but not sure) that may because of recent Home Assistant changes, causing those breaking changes. If so - guess you will need to either go to beta or wait till Bubblecard updates (and there are many) come out of beta.