For adding bubble card to UI lovelace minimalist, does the popup card configuration go inside the same yaml file or is there and easier way to separate the code into another yaml with the hash added?
Appreciate any help with this.
First of all, I love bubble-card, and your dedication to work-out the bugs! It took my dashboard to the next level.
I was just wondering if there’s a way around the contents of pop-ups appearing upon page load? I tried the optimized option, but it has the same behavior.
This will be fixed in the next release, the Home Assistant frontend was updated again and broke something, we will need to use the optimized mode to fix that issue.
Thanks for your help. I do see there is a color automatically set in the edit dialog, but when I delete this value (#ffffff) and the opacity value (88), wich are both optional, and save everything they are automatically reset to their original value again. I apparently have to give a value to overrule the white color, but just want the default theme color. Is this normal behaviour?
don’t know if it is done here, if not let me know (newbie :)) ok, I’m modding the bubble a bit to tailor it to my tast but can’t wrap my head around the radius of the pop-up. where can I change it?
the image is to give you an idea what I’m aiming for the next one is the pop-ups with radius.
@sanjo112 how did you get it to work on a tablet with more cards in the background? I hav a problem there, because the cards getting smaler, when i did it.
Best regards
I use layout-card an HACS element. I can control the numbers of columns etc with it
Hi, you can change it, here is how, don’t forget to add the !important at the end of that line.
I will release a new version soon with a more advanced fix for that column issue. But I still have a bit more work to do before I can release it.
1 Like
It worked!! thnxs, now I can continue 
1 Like
Yes you need to have everything on the same view, but it’s probably possible to do that in full YAML mode, I only use the UI mode.
Very much apricated the bubble card and currently updating my mobile dashboard.
One of the things I’m trying to solve is to have the bubble card, go over an bottom navigation bar I just added. Picture 1 is my main dashboard and picture 2 my current view from mobile including my navigation bar being on top, even over the bubble card pop-up.
Would like to figure out how I can ensure that the bubble card is the top card when clicking on it. Thought that the z-index under card_mod / style would do the trick when including in the bubble card popup but no. (tried to up the value too, 2/3/99, doesn’t change it)
card_mod:
style: |
ha-card {
max-height: calc(100vh - var(--header-height)) !important;
overflow-y: auto !important;
max-width: var(--masonry-column-width, 460px) !important;
}
:host {
position: fixed !important;
z-index: 1 !important;
bottom: 10px !important;
width: 95% !important;
}
Anything uses a similar floating navigation bar and found a way around this?
Thanks!
PS. Not at all a specialist in coding - use examples, ChatGPT & the forum to figure it out…
Found the solution, just had to place the card with the bottom bar above the bubble cards !
Changing the background color in the yaml is working to show the desired color on load for the popups. The strange thing is this color gets reverted the moment I interact with the popup content at the top of the card, it again switches to “my default” white, no idea where this is coming from. In the DOM I see there is a style attribute (style="--bubble-pop-up-background: rgba(255, 255, 255, 0.88);") hardcoded in the body tag, inside my yaml there is no card_mod reference to this tag. What can be causing this?
OnLoad
After interaction with the head of the popup
1 Like
I will try to fix that in the next release 
2 Likes
What card you use for the garbage collection?will you please share you code?
Hi Roy,
Sure, saw it on youtube and copied it to my own dashboard.
- type: custom:button-card
name: |
[[[
return states['sensor.afvalwijzer_next_in_days'].state;
]]]
entity: sensor.afvalwijzer_next_in_days
label: Volgende Container
show_label: true
show_state: false
tap_action:
action: none
navigation_path: none
custom_fields:
type: |
[[[
return states['sensor.afvalwijzer_next_type'].state;
]]]
styles:
custom_fields:
type:
- justify-self: start
- text-transform: capitalize
- margin-top: '-15px'
- font-size: 20px
- margin-left: 0px
- opacity: '0.5'
- font-weight: 300
card:
- padding: 12px 14px 12px 8px
- background: var(--contrast2)
- height: 150px
icon:
- width: 24px
- color: black
- justify-self: end
- margin-right: 0px
- margin-top: '-15px'
- opacity: '0.5'
name:
- justify-self: end
- font-size: 120px
- font-weight: 500
- padding: 2px 0
label:
- justify-self: start
- font-size: 20px
- opacity: '0.6'
- font-weight: 400
- margin-bottom: '-45px'
- margin-left: 15px
grid:
- grid-template-columns: 80px 50px 1fr
- grid-template-rows: min-content min-content
- grid-template-areas: '"n l l" "n i type"'
I have it copied in a swipe card with the agenda, so you have to correct the indentation. But that should be doable. Let me know if it works out.
1 Like
Hey, that’s a really cool theme.
I also like the top zone where you have the three lines icon, the weather and some button.
Do you mind sharing those info (theme included)?
Sure!
Theme is called rounded, can you find a page and all information required on the forum. Concerning the other layout, not my own design…
Look at My Smart Home !
Let me know if you need specific code by a mesasge, happy to share if the videos aren’t sufficient.
So I’m having a weird issue with Android. I design my dashboard and looks great on iPhone. Then on my wife’s galaxy phone, the bubble buttons cover the bottom cards on the main dash (meaning there are a few cards she can’t see) and it won’t let me scroll down like I can on the iPhone.
Any thoughts?