Appreciate the updates. Just wondering if you could introduce some sort of ‘separator’ that is automatically inserted between entity_state, last_changed, or any other attributes when they’re enabled, thanks.
You really manage to make this card even more awesome again and again. Thank you for all the time and effort you guys put into this project.
I currently plan to replace most of my custom cards with bubble cards, but one little issue is holding me back: the low padding of the cards just doesn’t fit my theme at all. I would like to at least double the padding, but can’t find an easy way to do it. I searched for a CSS-variable and tried to give the outer div container more padding, but many elements have fixed heights and hardcoded margins/paddings which ends up in a lot of CSS kung fu.
Can anyone think of an easy way to increase the general padding of the cards to 16px, for example?
Found it
styles: |
.bubble-icon {
color: ${hass.states['sensor.compteur_owon_power_l3'].state << 0 ? 'green' : 'red'} !important;}
Bubble Card 2
v2.1.0
Hi everyone!
I’m back! The past few weeks have been quite busy for me and I haven’t slept much because… I’m now a dad! And I’m so proud of this new achievement! 
Despite the new and joyous responsibilities, I’ve managed to take some time to address some of the recently submitted issues.
I also have a good news for some users. By fixing an issue with the haptic feedback feature, I found a massive memory leak in the sub-buttons actions. This was consuming the RAM and the CPU over time and was mainly noticeable on low-end devices. This issue was slowing down/breaking the pop-ups on some setups. I can say that everything is A LOT faster and everything is working perfectly now!
But that’s not all! I also wanted to introduce a new card to the collection, but also some new features!
Here are all the details:
Select card
You now have the possibility to add a dropdown menu for your input_select / select entities! This new card also supports the sub-buttons and all the common Bubble Card features.
Select feature for the sub-buttons
In addition to the new select card, you now have the option to add a dropdown menu for your input_select / select entities to your sub-buttons!
Open / Close action for the pop-ups
This new feature allows you to trigger an action, similar to the ones from the tap actions, but when your pop-up is opening/closing. For example, this allows you to cancel an alarm pop-up, or to toggle a boolean to track the state of a pop-up. This is perfect in combination with the pop-up trigger feature! In YAML you can add open_action: and close_action: followed by any available action.
Hiding the pop-up header
You can now fully hide the pop-up header, including the close button, without any custom styles. In YAML you can hide it with show_header: false or with the new toggle in the editor.
New features
- Select card: In YAML you can add it with
card_type: select, the YAML is basically the same as the buttons (more details above) - Select feature for the sub-buttons: Sub-buttons now supports
input_selectandselectentities (more details above) - Hiding the pop-up header: Ability to remove the pop-up header (more details above)
- Open / Close action for the pop-ups:
open_action:andclose_action:for pop-ups (more details above) - Deep attributes: @brunosabot added the ability to get deeper values in the attributes, like
forecast[0].templow. PR #577 - Assist action: You can now add the Assist action in the editor. #595
Bug fixes and optimizations
- Memory leak: A massive memory leak in the sub-buttons has been fixed. More info above. #612
- HA 2024.7 compatibility: Fixed the pop-up preview in the HA 2024.7 editor.
- Sub-button tap action none: Setting a sub-button tap action to none is not blocking a slider anymore.
- Sub-button state: Fixed an issue where the sub-button state was not always updated.
- Pop-up CSS issues: Some pop-up CSS issues have been fixed.
- Sub-buttons settings: Options in state button disabled have been fixed. #606
- Haptic loop issue: The haptic loop issue has been resolved. #601
- Input_select options: The inaccessible
input_selectoptions in a pop-up have been fixed. #565 - Icon resizing: The issue with not being able to resize the icon with a custom style in the separator has been fixed. #593
- Media player volume slider: Fixed some issues with the media player volume slider
- Climate state color: Climate states are now correctly changing button color
- Custom templates errors: Custom templates are now throwing errors in the card for better visibility/understanding
I can’t wait for your feedback!
And if you are interested I’ve opened a Subreddit for Bubble Card where I post my progress on the project. Here it is:
12 Likes
Congratulations!!
1 Like
Good thing you got this out before ‘daddy brain’ sets in ;).
I haven’t previously posted here because I haven’t needed to, however I should at least thank you for an incredible next level card and congratulate you on becoming a dad.
Enjoy.
1 Like
Hi, i have some problems with the pop up card and my theme. I use the rounded theme (
Rounded - Dashboard guide) and cant get the background color for the pop up in dark/light mode right.
I have it set to var(–black1) in the picture.
Upgraded to 2.1.0 and now I have scroll bars, it persists into edit mode too. I thought I’d seen this issue in this thread but can’t find it now. Does anyone know why this is and what direction I should take to fix it? Thanks in advance.
I will fix this in the next release. Sorry about that! This issue seems to occur only on some browsers, mostly on Windows.
I had to make some significant changes to the CSS of certain cards for the new select sub-button. This was quite challenging, and I hope this is the only issue 
LOL came back here to mention that it only happens in Iridium browser on desktop. Chrome, Edge, (desktop and mobile versions of these) and companion app all look great. I’m glad to hear that you’re aware of it, but can totally see why it’s a low priority issue.
Now go change a diaper if you can actually pull your kid out of your partners arms for a minute :).
1 Like
Hi everyone! My time is more limited these days, so I’m really sorry for not responding to all of you. For now, I will mainly focus my time on new and existing issues, and possible new features.
And thank you all for making this project so active. It’s truly a motivating and rewarding experience, and it really motivates me to keep growing it.
Cheers!
Edit: Ho one more thing, @brunosabot the developer who helped me the most with v2, has just published a very complete article on how he created his Home Assistant dashboard almost entirely with Bubble Card. Go take it a look!
10 Likes
@Cloos Just updated to 2.1.0 and have a question about the haptic feedback bug that was supposed to be fixed. Was that fix supposed to include when you interact with a slider? When I adjust the brightness of any of my sliders I get constant haptic bumps.
Congratulations!! 
1 Like
Great job,
How could we define all the --var for background-color
How can I know what is the accent-color, success-color,…
Thanks
Is it possible to use dynamic names in the horizontal buttons stack?
For example, one of the buttons in the horizontal button stack is named “Attic.” I’d like it to dynamically display as “Attic 30°C,” with the temperature value read from the climate.attic entity (temperature attribute).
I understand how to achieve this for a normal button, but it doesn’t seem to work for the horizontal buttons stack.
${card.querySelector('.bubble-name').innerText = "It's currently " +
hass.states['weather.home'].state}
Hello,
Is it possible to make horizontal stack dynamique with optional cards ?
If I configure “Card1 / card2/ card3” and card2 is not displayed I see “card1 card3” instead of “Card1 card 3”
Thanks
Just wanted to share my dashboard created with this amazing card.
My setup is mainly mobile. I do not use a tablet or screen anywhere else. Everything is done with voice, so my layout is based for mobile specifically.
Home page
each of the horizontal buttons below open up popup cards
I also have the cards on the main page opening other cards with the popup function.
I have made some minor changes. I have added a decluttering card that allows me to place a timer-bar-card on the card above it. Placement is pretty much hard valued right now, as i couldn’t figure a better way to do it. If anybody knows a better way to do what i am trying to acheive im all ears.
Hope you all like.
11 Likes
Hi Cloos! Gratulations (you got father I read) and greetings from Austria. I like the style of bubble cards. Great to use. Unfortunately I often need entity values to visualize. I found no possibility to do that with Bubble Cards.
It would be GREAT to have a Bubble Card that looks like the Slider Button Card , where you can set min and max-value and use it as horizontal Bubble Card style Bar-Graph.
How many beers to buy to get that? 
Hi Cloos-- I love these bubble cards-- I use them exclusively on my dashboard!
I had a question for you-- when I open a popup, there is a large gap above the top (shown below). Does anyone know if I’m doing something wrong or if there is a way to remove this odd space?
Thanks!
