Hi, Thank you for the bubble cards! i love it! after ive updated to the latest version, my bubble cards acted funny. see pic below
Only half of the pop up card is shown.
Settings for the card above
Hi! Can you try to set your top margin to 0px? And also have you tried restarting HA?
Hi, this looks really good. I have had a play and can get the pop up working. A couple of questions though in relation to your video, how have you managed to get your buttons at the bottom of the screen and how have you got them to move?
This is the horizontal buttons stack, it’s available in Bubble Card.
Take a look at the documentation about it 
1 Like
Thanks, this works initially, but once the bubble card has operated, the horizontal button card stack disappears, any ideas what is wrong?
vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#garage'
name: Garage
entity: switch.garage_door_switch_s1
icon: mdi:garage
state: binary_sensor.garage_door_sensor_contact
margin_top_mobile: 2px
margin_top_desktop: 2px
styles: |
#root {
background-color: rgba(79, 69, 87, 0.8) !important;
}
bubble-card::after {
display: none !important;
}
- type: custom:bubble-card
card_type: separator
name: Temperature
icon: mdi:thermometer
- type: custom:bubble-card
card_type: button
button_type: switch
entity: sensor.garage_multi_sensor_temperature
name: Multi-Sensor
show_state: true
icon: mdi:thermometer
- type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: Garage
1_icon: mdi:garage-variant
1_link: '#garage'
1_entity: binary_sensor.garage_door_sensor_contact
1_pir_sensor: binary_sensor.garage_door_sensor_contact
This card can’t be in a pop-up, it must be the last one in your main view.
1 Like
Yes i have tried setting it to 0px, it still shows only half. I have also tried restarting HA, still stuck with the same problem 
Have you tried in different browsers? I’m really clueless because you seems to be the only one with this issue. But I really want to find the cause.
Also have you tried to rollback to a previous version to see if it fix your issue? And if yes what version is working?
And finally can you share your YAML of this pop-up?
Hi, sorry maybe my info was incomplete. This problem only occurs in the HA Companion app. Using web browser it works as expected. But in the app, some of the pop up didnt even pop up. Pop up card below for your reference :
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#fan'
name: Fan control
icon: mdi:ceiling-fan
auto_close: '10000'
back_open: true
margin: 7px
is_sidebar_hidden: true
- features:
- type: fan-speed
type: tile
entity: fan.office_fan
vertical: false
show_entity_picture: false
color: teal
tap_action:
action: more-info
icon_tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: {% if is_state('fan.office_fan','on')%} #1D3420 {% endif %}
}
- features:
- type: fan-speed
type: tile
entity: fan.dining_fan
vertical: false
icon_tap_action:
action: toggle
tap_action:
action: more-info
- features:
- type: fan-speed
type: tile
entity: fan.family_area_fan
vertical: false
show_entity_picture: false
color: teal
tap_action:
action: more-info
icon_tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: {% if is_state('fan.family_area_fan','on')%} #1D3420 {% endif %}
}
- features:
- type: fan-speed
type: tile
entity: fan.kids_fan
vertical: false
show_entity_picture: false
color: teal
tap_action:
action: more-info
icon_tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: {% if is_state('fan.kids_fan','on')%} #1D3420 {% endif %}
}
- type: custom:vertical-stack-in-card
cards:
- type: tile
entity: fan.xiaomi_smart_fan
vertical: false
tap_action:
action: more-info
icon_tap_action:
action: toggle
name: Standing Fan
card_mod:
style: >
ha-card {
background: {% if is_state('fan.xiaomi_smart_fan','on')%} #1D3420 {%
endif %}
}
- type: custom:mushroom-chips-card
card_mod:
style: >
ha-card { --chip-spacing: -3px; --chip-padding: 16px;
--chip-border-radius: 10px; --chip-background: {% if
is_state('fan.xiaomi_smart_fan','on')%} #1D3430 {% endif %}
}
chips:
- type: spacer
- type: spacer
- type: template
double_tap_action:
action: none
icon: mdi:fan-speed-1
tap_action:
action: call-service
service: fan.set_percentage
target:
entity_id: fan.xiaomi_smart_fan
data:
percentage: 15
hold_action:
action: none
card_mod:
style: >
ha-card {
--chip-background: {% if
is_state_attr('fan.xiaomi_smart_fan','percentage', 15) %}
#324C48 {% endif %}
}
ha-card:hover {
--chip-background: #324C48 !important;
}
- type: spacer
- type: template
double_tap_action:
action: none
icon: mdi:fan-speed-2
tap_action:
action: call-service
service: fan.set_percentage
target:
entity_id: fan.xiaomi_smart_fan
data:
percentage: 50
hold_action:
action: none
card_mod:
style: >
ha-card {
--chip-background: {% if
is_state_attr('fan.xiaomi_smart_fan','percentage', 50) %}
#324C48 {% endif %}
}
ha-card:hover {
--chip-background: #324C48 !important;
}
- type: spacer
- type: template
double_tap_action:
action: none
icon: mdi:fan-speed-3
tap_action:
action: call-service
service: fan.set_percentage
target:
entity_id: fan.xiaomi_smart_fan
data:
percentage: 70
hold_action:
action: none
card_mod:
style: >
ha-card {
--chip-background: {% if
is_state_attr('fan.xiaomi_smart_fan','percentage', 70) %}
#324C48 {% endif %}
}
ha-card:hover {
--chip-background: #324C48 !important;
}
- type: spacer
- type: template
double_tap_action:
action: none
icon: mdi:fan-plus
tap_action:
action: call-service
service: fan.set_percentage
target:
entity_id: fan.xiaomi_smart_fan
data:
percentage: 100
hold_action:
action: none
card_mod:
style: >
ha-card {
--chip-background: {% if
is_state_attr('fan.xiaomi_smart_fan','percentage', 100) %}
#324C48 {% endif %}
}
ha-card:hover {
--chip-background: #324C48 !important;
}
- type: spacer
- type: template
double_tap_action:
action: none
icon: mdi:fan-plus
tap_action:
action: call-service
service: fan.set_percentage
target:
entity_id: fan.xiaomi_smart_fan
data:
percentage: 100
hold_action:
action: none
card_mod:
style: |
ha-card:hover {
--chip-background: #324C48 !important;
}
- type: spacer
- type: template
double_tap_action:
action: none
icon: mdi:rotate-360
tap_action:
action: toggle
entity: script.enable_disable_fan_oscillation
hold_action:
action: none
card_mod:
style: |
ha-card:hover {
--chip-background: #324C48 !important;
}
content: ''
- type: spacer
- type: spacer
alignment: center
card_mod:
style: |
ha-card {
padding: 10px;
background: {% if is_state('fan.xiaomi_smart_fan','on')%} #1D3420 {% endif %}
}
- square: false
columns: 2
type: grid
cards:
- features:
- type: fan-speed
type: tile
entity: fan.living_room_fan_1_2
icon_tap_action:
action: more-info
color: teal
vertical: false
show_entity_picture: false
tap_action:
action: toggle
- features:
- type: fan-speed
type: tile
entity: fan.living_room_fan_2_2
icon_tap_action:
action: more-info
color: teal
vertical: false
show_entity_picture: false
tap_action:
action: toggle
Btw, how do you rollback to a previous version? sorry i have never tried this before. Thank you for your help 
In HACS go to Bubble Card, on the 3 dots icon on the top right corner go to re-download then select the version you want.
I have rolled back to beta version, restarted HA and clear my cache, The problem is still present. I am not sure what caused this. After thorough check, it works fine with my other dashboard. 
Can you try with a fresh pop-up then? I hope that you will find what is causing this. Keep me informed if you made any progress.
v1.1.0 - Design enhancements and new styling options!
New features:
- The pop-ups have undergone a slight visual transformation, and they look great!
- A new animation has been added to the
horizontal-buttons-stackthat activates once the page has loaded. This can be disabled withrise_animation: false. - Introduced
bg_colorto modify the background color of a pop-up. - Introduced
bg_opacityto adjust the background opacity of a pop-up. The previous default wasbg_opacity: 100. - Introduced
bg_blurto alter the background blur effect of a transparent pop-up. The previous default wasbg_blur: 0. - Introduced
shadow_opacityto adjust the shadow opacity of a pop-up. The previous default wasshadow_opacity: 0. - All new options are accessible in the GUI editor.
Fixes
- Minor enhancements have been implemented.
More styling options for the other cards will be added soon. Please feel free to open an issue for any specific styling requests.
I really appreciate your feedback on any issues you may encounter, and thank you once again for your continued support!
5 Likes
I tried with a fresh pop-up, still having the same problem. Other thing to note is that, the page/dashboard im having problem with is the one with kiosk mode enabled to hide the top bar disappeared in the app. the one thats working is without this kiosk mode.
edit: so it is the kiosk mode enabled. i removed it from one of my page and the pop up works. Is it a bug or it just doesnt work with kiosk mode enabled? hopefully there will be a fix
Kiosk mode is old and not maintened anymore, they are better ways to hide your header on mobile with card-mod for example.
If you are using a theme you can just add this at the end of your theme yaml, just edit the first line and you will have no header on mobile (only) anymore :
card-mod-theme: the_name_of_your_theme
card-mod-root-yaml: |
.: |
@media only screen and (max-width: 768px) {
.header {
display: none;
opacity: 0;
}
#view {
padding-top: 0 !important;
margin-top: 0 !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
}
And to display the header just put your device in landscape mode or move to your computer.
It’s possible to hide it on all resolutions too like that, but add a button somewhere on your dashboard to navigate to your settings page, just in case:
card-mod-theme: the_name_of_your_theme
card-mod-root-yaml: |
.: |
.header {
display: none;
opacity: 0;
}
#view {
padding-top: 0 !important;
margin-top: 0 !important;
height: calc(100vh - env(safe-area-inset-top)) !important;
}
2 Likes
Trying to give these a whirl, but I’m feeling pretty dumb on step 0 here. It says it’s mostly editable through the GUI, but all I get is this screen and no matter what I select in the dropdownlist, it says “You need to add a card type first.”
Feel like I’m missing something really obvious, but all the instructions just say to use the GUI editor… :\
Nope you are not doing anything wrong, but I did 
I will release a new version!
Edit: It’s now fixed, thanks for pointing me this issue!
2 Likes
i suppose i have to put numbers in the ‘safe-area-inset-top’? and in what unit? sorry i am not that advanced yet 
like this?
Nope, just replace the first line with “card-mod-theme: mushroom-shadow” and you should be good