Has anyone figured out if you can use mushroom cards in your popup card? It lets me build them in the popup card but when i open the popup the buttons I built in mushroom are greyed out, so I can see them but can’t interact with them.
Actually I almost only use mushroom cards within the popups… no problem so far. Didn‘t do anything special either to implement them.
How can I stop the (invisible) Pop-Up card to move my whole layout? It leaves an empty space to the right of my dashboard
1 Like
Can you by chance share some of the code you used to setup mushroom cards within the popup? Thank you
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#kitchen'
entity: light.kitchen_lights
name: Kitchen
icon: mdi:lightbulb-group
state: sensor.ecobee_temperature
- type: custom:bubble-card
card_type: separator
name: Lights
icon: mdi:lightbulb
- type: custom:mushroom-light-card
entity: light.kitchen_lights
name: Kitchen Lights
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
hold_action:
action: more-info
double_tap_action:
action: more-info
icon: mdi:lightbulb-group
- type: custom:mushroom-light-card
entity: light.kitchen_left_bulb
name: Kitchen - Left
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
hold_action:
action: more-info
double_tap_action:
action: more-info
Hey, my current dashboard is made using mostly UI Lovelace Minimalist where I have each room in my house split out to different yaml files/views. I am hoping to keep most of this setup I currently have, but instead of the user navigating to different page for each room, it would show a bubble pop up card instead. I am hoping to keep each of my rooms in separate yaml files for simplicity/maintenance purposes.
Is there any way I can do this or is it required that both the bubble pop up window and the button to call the pop have to be included in the same yaml file?
Can you share the code of your first sensor with the graph? Thanks 
Here you go
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
entity: sensor.ext_battery_state_of_capacity
primary: '{{ states(entity) }}%'
secondary: '{{ state_attr(entity, ''friendly_name'') | title }}'
icon: >+
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10
%}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: horizontal
tap_action:
action: more-info
card_mod:
style: >
ha-card { border-radius: 8px;background: none;box-shadow:
none;--ha-card-border-width: 0; } :host { flex: 1 1 0% !important;
min-width: min-content !important; }
- type: custom:mini-graph-card
entities:
- entity: sensor.ext_battery_state_of_capacity
name: Solarspeicher
color_thresholds:
- value: 10
color: red
- value: 20
color: orange
- value: 35
color: yellow
- value: 50
color: lime
- value: 70
color: green
- value: 90
color: teal
hours_to_show: 24
points_per_hour: 1
line_width: 1
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: >
:host { flex: 2 2 0% !important; }
ha-card {border-radius: 25px !important;background: none;box-shadow:
none;--ha-card-border-width: 0;padding-top: 0 !important;padding-right:
12px !important;-webkit-mask-image: linear-gradient(to left,
rgba(0,0,0,1) 85%, rgba(0,0,0,0));}
2 Likes
Thanks mate, really appreciated
1 Like
Hi everyone and sorry for the lack of answers these days, Bubble Card 2 is on its way and the beta is coming soon! Here’s a sneak peek at my favorite feature that I’ve nearly finished! The first screenshot shows a button that I’ve created and the second one is from my wife’s test… I can’t wait to see what you are going to create with these sub buttons in the new editor 
And for more details you can go on my freshly created r/BubbleCard.
8 Likes
Hello @Cloos
First of all, as always, thanks for your wonderful work. This card is really cool and I can’t wait to see what are you bringing with v2.
I have an issue with another custom card: swipe card
As you can see, the swipe card content always stays on top, even if the popup is opened.
Do you have a work around for this?
Thanks
You’re welcome! For your question you can try to add this custom style to your pop-ups but that can add more issues:
styles: |
.pop-up {
z-index: 2; /* Increase this value if it's not working */
}
But just to be sure, on your dashboard have you checked if this swipe card is positioned before the pop-up and not after?
Edit: If your order is correct the best way would be to edit the z-index of that swipe card with card-mod (with a value of 0 or 1).
And even better, open an issue on the swipe card GitHub page, this is an issue from that card because I guess that it is coming in front of your “more info” panel as well.
Ok, you were right.
Popups were placed before the swipe card, so that was the first issue.
Anyway, I’ll open the issue anyway cause the card still remains on a kind of strange layer:
I can still see the card behind the popup, and it’s not blurred as the other background stuff.
Thanks!
1 Like
Can you share the code of the second card with the sensor and the graph? That will be great 
Thanks 
same scenario here…was just looking for a fix myself, any luck?
Adding the popup cards seems to add extra space to my layout.
I’ve seen a couple other people mention this but it has been acknowledged yet.
For example here and here
Has anyone that has run into this manage to solve the issue.
Here is an example of what I’m getting.
Before adding bubble card popups at the bottom of my yaml:
…and after adding the popups:
is your card set to render as a square or fill the container? Try playing with those and see if you get the space back.
You can try to play with the column_fix (take a look at the documentation) but this is not always perfect. But I’m still looking for a better solution.
Hi @Cloos , first of all congratulations on your cards!
Can you tell me why I don’t get the cover as a background?
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#media'
icon: mdi:music
name: Media
styles: |
.pop-up {
background: url( '{{ state_attr('media_player.spotify_mattia_ticconi', "entity_picture") }}') center no-repeat;
}
Bubble Card don’t support Jinja templates yet, but you can use the built-in style template to achieve the same result: