Just use “type: vertical-stack” instead of vertical layout
Try to build a new vertical stack to see if that generally works, as then you must have any issue in your yaml code. Vertical stack is a standard HA element and has nothing to to with bubble card.
Simple example:
We don’t know your setup, but your “custom:vertical-layout” is not standard, maybe this GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards. ? As said, seems not bubble card related.
Great work from you. The card looks fantastic.
I integrated it into my test dashboard to play with. I tried using a picture instead of the icon. I use almost the same card, just not based on the bubble cards.
Unfortunately, my photo is not used instead of the icon.
.bubble-entity-picture {
background-image: url("/local/interior-design.png") !important;
background-size: cover;
}
Has anyone tried to replicate the mushroom side menu toggle yet? chatgpt thinks it’s as easy as just applying this to a sub button but it does absolutely nothing for me. It’s apparently what mushroom uses but whilst that works with mushroom it’s not working on my bubble cards.
tap_action:
action: fire-dom-event
event: hass-toggle-menu
First of all, wow that is some nice dashboard.
If I add this before Place all icon changing ... than it works for me no problem.
.bubble-entity-picture{
background-image: url("https://community.home-assistant.io/user_avatar/community.home-assistant.io/mrbearpresident/48/585054_2.png") !important;
display: block !important;
background-position: center center;
background-size: 50%;
background-repeat: no-repeat;
}
1 Like
Can someone explain to me the actual usage/difference of
bubble-button-card-container and bubble-button-background?
If I add a background color for both, background has no effect, only the container color determins the color.
For the background it seems like generally a transparency of 0.3 or so is applied, because the same color code leads to a lighter color than for the container.
bubble-button-card-container:
bubble-button-background:
In both cases I have used the same color code for background color rgb(153,51,255).
If I add transparency to both with rgba then the combination of both makes it darker, showing that the container is in front of the background.
I am trying to find out when I should use one or the other, as I notice that currently I use sometimes one and sometimes the other.
The bubble-button-background colors to the activate color in a switch.
This goes to the color var(--accent-color)
In de-active state it is just transparent.
It is build up like this (every child gets a different color)
got full yaml for that ? 
I can’t wait for this 
For large Layout: Calculate height with row height,size and gap by MrBearPresident · Pull Request #965 · Clooos/Bubble-Card · GitHub
5 Likes
You’re not the only one. This was already lots of work.
Although it will probably break a lot and have loads of bugs.
2 Likes
Need some styling help! I have created the below cover card for a blind:
Instead of having three separate icons I want to have them all in one container like the climate card temperature buttons on the right.
What is the best way to achieve this with a standard button card?
- type: custom:bubble-card
card_type: button
button_type: slider
entity: cover.lounge_blind
icon: ""
show_attribute: true
attribute: current_position
show_state: true
name: Blind
card_layout: large
styles: |2-
.bubble-icon {
color: ${state === 'open' ? 'var(--google-violet)' : 'grey'} !important;
}
.bubble-range-fill {
background: var(--google-violet) !important;
opacity: 1 !important;
}
.bubble-sub-button-1 {
background-color: ${hass.states['sensor.lounge_blind_battery'].state <= 10 ? 'var(--google-red)' : hass.states['sensor.lounge_blind_battery'].state <= 20 ? 'var(--google-orange)' : 'rgba(0,0,0,0)'} !important;
display: ${hass.states['sensor.lounge_blind_battery'].state <= 20 ? '' : 'none'} !important;
}
slider_live_update: false
sub_button:
- entity: sensor.lounge_blind_battery
show_state: true
- entity: cover.lounge_blind
show_icon: true
icon: mdi:arrow-down
state_background: false
tap_action:
action: call-service
target:
entity_id: cover.lounge_blind
service: cover.close_cover
- entity: cover.lounge_blind
icon: mdi:square-outline
state_background: false
tap_action:
action: call-service
target:
entity_id: cover.lounge_blind
service: cover.stop_cover
- entity: cover.lounge_blind
icon: mdi:arrow-up
state_background: false
tap_action:
action: call-service
target:
entity_id: cover.lounge_blind
service: cover.open_cover
Thanks!
1 Like
looks like this filter in the style.js is making the colour difference to the icon.
.is-on .bubble-icon {
filter: brightness(1.1);
opacity: 1;
}
I added this to my button style directly to override it. Would be great to have the icon and the slider/button the same colour though consistently without the filter added
.is-on .bubble-icon {
filter: brightness(1.0);
opacity: 1;
Add this to your custom style:
.bubble-sub-button-2{
border-radius: 32px 0px 0px 32px;
}
.bubble-sub-button-3{
border-radius: 0px;
margin-left: -10px;
margin-right:-10px;
}
.bubble-sub-button-4{
border-radius: 0px 32px 32px 0px;
}
3 Likes
Hello Guys,
Plz see the screenshot below.
I have a popup, in which a dropdown is placed. For testing the drop down has values from alphabet “a” to “t”.
When the drop down is opened the first two enteries get hidden under the popup heading.
Is this a bug to some setting needs to be done.
Please reply
Thank you.
Looks like a bug, please report through Github.
Hi, I’d like to use Bubble Card for my dashboard, but I’m having trouble using the popup inside a picture-elements.
When I click to activate the popup, the entire screen becomes blurred, but nothing is displayed.
Has anyone else had the same problem?
Using this setup as my daily driver.
Don’t have this issue.
Can you tell some more about your setup?
Do you use latest version?
Do you run in on an older device?