I noticed some breaking changes for me.
I somehow can't seem to scroll in my popups anymore. I have a 65px high scrollable vertical stack for my buttons, so that I have a sticky home button on the bottom. But after migrating I can't scroll.
It scrolls on desktop by manually sliding the sidebar, but on my iPhone it's stuck.
Any suggestions on how to bring the scroll back to iPhone? 
Old code example:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#plant"
button_type: name
sub_button:
main: []
bottom: []
name: Planter
show_state: true
icon: mdi:sprout
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.alle_lys
button_action:
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.alle_lys
styles: |-
styles: |-
ha-card {
--bubble-pop-up-background-color: transparent;
--bubble-pop-up-main-background-color: transparent;
}
.bubble-pop-up,
.bubble-pop-up-container,
.bubble-pop-up-background {
top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
background:
linear-gradient(rgba(16, 38, 30, 0.82), rgba(16, 38, 30, 0.92)),
url("/local/img/nature-popup-bg.png") !important;
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
}
.bubble-button-card-container {
background: rgba(60, 94, 74, 0.72) !important;
border: 1px solid rgba(168, 196, 154, 0.13) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.bubble-button-background {
opacity: ${state !== '0' ? '1' : '0'} !important;
background: ${state !== '0'
? 'linear-gradient(145deg, rgba(168,196,154,0.45), rgba(233,241,232,0.18))'
: 'transparent'} !important;
}
.bubble-icon-container {
background: ${state !== '0'
? 'rgba(233, 241, 232, 0.28)'
: 'rgba(168, 196, 154, 0.16)'} !important;
box-shadow: ${state !== '0'
? '0 0 16px rgba(233, 241, 232, 0.18)'
: 'none'} !important;
}
.bubble-icon {
color: ${state !== '0' ? '#F4F7F1' : '#EAD8B5'} !important;
}
.bubble-name {
color: #EAD8B5 !important;
font-weight: 700 !important;
}
.bubble-state {
color: rgba(234, 216, 181, 0.72) !important;
}
card_layout: normal
popup_mode: centered
- type: custom:mod-card
card_mod:
style: |
ha-card {
height: 64vh;
overflow-y: auto;
overflow-x: hidden;
padding: 0 4px 92px 4px;
background: transparent;
box-shadow: none;
border: 0;
}
ha-card::-webkit-scrollbar {
width: 5px;
}
ha-card::-webkit-scrollbar-thumb {
background: rgba(234, 216, 181, 0.35);
border-radius: 999px;
}
ha-card::-webkit-scrollbar-track {
background: transparent;
}
card:
type: vertical-stack
cards:
- sensors: {}
colors: {}
ranges: {}
type: custom:nature-plant-card
entity: plant.plante_kontor_2
name: Agurk
- sensors: {}
colors: {}
ranges: {}
type: custom:nature-plant-card
entity: plant.tomatplanter
name: Tomater
- type: custom:mod-card
card_mod:
style: |
ha-card {
position: sticky;
bottom: 18px;
z-index: 999;
width: calc(100% - 44px);
max-width: 390px;
margin: 0 auto 18px auto;
padding: 6px;
border-radius: 30px;
background: rgba(30, 58, 47, 0.82) !important;
border: 1px solid rgba(168, 196, 154, 0.16);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 10px 28px rgba(0,0,0,0.22);
backdrop-filter: blur(16px);
}
card:
type: grid
square: false
columns: 1
cards:
- type: custom:paper-buttons-row
buttons:
- icon: mdi:home
layout: icon
name: Hjem
tap_action:
action: navigate
navigation_path: "#home"
styles:
button:
background: rgba(168, 196, 154, 0.18)
border-radius: 24px
width: 92px
height: 44px
display: flex
align-items: center
justify-content: center
icon:
color: "#EAD8B5"
margin-top: 0
"--mdc-icon-size": 24px
New migrated example:
type: custom:bubble-card
card_type: pop-up
hash: "#lys"
button_type: switch
sub_button:
main: []
bottom: []
entity: sensor.lights_on
name: Lys og Gardiner
show_state: true
icon: mdi:ceiling-light
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.alle_lys
button_action:
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.alle_lys
styles: |-
styles: |-
ha-card {
--bubble-pop-up-background-color: transparent;
--bubble-pop-up-main-background-color: transparent;
}
.bubble-pop-up,
.bubble-pop-up-container,
.bubble-pop-up-background {
top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
background:
linear-gradient(rgba(16, 38, 30, 0.82), rgba(16, 38, 30, 0.92)),
url("/local/img/nature-popup-bg.png") !important;
background-size: cover !important;
background-position: center top !important;
background-repeat: no-repeat !important;
}
.bubble-button-card-container {
background: rgba(60, 94, 74, 0.72) !important;
border: 1px solid rgba(168, 196, 154, 0.13) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
.bubble-button-background {
opacity: ${state !== '0' ? '1' : '0'} !important;
background: ${state !== '0'
? 'linear-gradient(145deg, rgba(168,196,154,0.45), rgba(233,241,232,0.18))'
: 'transparent'} !important;
}
.bubble-icon-container {
background: ${state !== '0'
? 'rgba(233, 241, 232, 0.28)'
: 'rgba(168, 196, 154, 0.16)'} !important;
box-shadow: ${state !== '0'
? '0 0 16px rgba(233, 241, 232, 0.18)'
: 'none'} !important;
}
.bubble-icon {
color: ${state !== '0' ? '#F4F7F1' : '#EAD8B5'} !important;
}
.bubble-name {
color: #EAD8B5 !important;
font-weight: 700 !important;
}
.bubble-state {
color: rgba(234, 216, 181, 0.72) !important;
}
card_layout: normal
popup_mode: centered
with_bottom_offset: true
cards:
- type: custom:layout-card
layout_type: custom:vertical-layout
layout:
height: 64vh
margin: 0vh 0vh 0vh 0vh
padding: 0vh 0.4vh
cards:
- type: custom:simple-tabs
background-color: rgba(60, 94, 74, 0.42)
border-color: rgba(168, 196, 154, 0.18)
text-color: rgba(234, 216, 181, 0.72)
active-background: >-
linear-gradient(145deg, rgba(168,196,154,0.45),
rgba(233,241,232,0.18))
active-text-color: "#EAD8B5"
tabs:
- title: 1. etg
cards:
- type: custom:decluttering-card
template: seperator
variables:
- name: 1. etasje
- square: false
type: grid
cards:
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Gang
- icon: mdi:ceiling-light
- entity: light.tak_gang
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Kommode gang
- icon: mdi:lamp
- entity: light.gang_kommode_lampe
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Bod
- icon: mdi:ceiling-light
- entity: light.tak_bod
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Gjesterom
- icon: mdi:ceiling-light
- entity: light.taklampe_stort_gjesterom
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Bad
- icon: mdi:light-recessed
- entity: light.bad_1_etg
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Speil Bad
- icon: mdi:mirror-rectangle
- entity: light.speil_bad_1etg
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Soverom
- icon: mdi:ceiling-light
- entity: light.soverom
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Klesskap
- icon: mdi:wardrobe
- entity: light.bryter_klesskap
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Nattbord <br>André
- icon: mdi:wall-sconce
- entity: light.nattlampe_andre
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Nattbord <br>Martine
- icon: mdi:wall-sconce
- entity: light.nattlampe_martine
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Kontor
- icon: mdi:ceiling-light
- entity: light.taklampe_kontor
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Lyslenke Terasse
- icon: mdi:string-lights
- entity: light.lyslenke_terrasse
- type: conditional
conditions:
- condition: state
entity: light.trapp_julelys
state_not: unavailable
card:
type: custom:decluttering-card
template: lysbryter_nature
variables:
- navn: Trapp Julelys
- icon: mdi:pine-tree
- entity: light.trapp_julelys
columns: 2
- title: 2. etg
cards:
- type: custom:decluttering-card
template: seperator
variables:
- name: 2. etasje
- square: false
type: grid
cards:
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Trapp
- icon: mdi:ceiling-light
- entity: light.taklampe_trapp
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Glasskap
- icon: mdi:glass-wine
- entity: light.glasskap
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Kjøkkenøy
- icon: mdi:ceiling-light
- entity: light.tak_kjokkenoy
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: LED <br>Kjøkkenøy
- icon: mdi:led-strip-variant
- entity: light.led_kjokkenoy
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Lampe <br> Skjenk
- icon: mdi:lamp
- entity: light.lampe_skjenk
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Spisebord
- icon: mdi:vanity-light
- entity: light.spisebord
- type: conditional
conditions:
- condition: state
entity: light.juletre
state_not: unavailable
card:
type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Juletre
- icon: mdi:pine-tree
- entity: light.juletre
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: TV-Stue
- icon: mdi:ceiling-light
- entity: light.tv_stue
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: LED TV
- icon: mdi:television
- entity: light.led_tv
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Bad
- icon: mdi:light-recessed
- entity: light.bad_2_etg
- type: custom:decluttering-card
template: lysbryter_nature
variables:
- name: Speil Bad
- icon: mdi:mirror
- entity: light.speil_bad_2_etg
columns: 2
- title: Gardiner
cards:
- type: custom:decluttering-card
template: seperator
variables:
- name: Gardiner
- square: false
type: grid
cards:
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Soverom
- icon: mdi:curtains
- entity: cover.gardiner_soverom
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Soverom
- icon: mdi:blinds
- entity: cover.rullegardin
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Kontor
- icon: mdi:blinds
- entity: cover.rullegardin_lite_gjesterom
- type: custom:decluttering-card
template: lys_slider_nature
variables:
- name: Gjesterom
- icon: mdi:blinds
- entity: cover.rullegardin_stort_gjesterom
columns: 2
- title: Dører
card:
type: markdown
content: Home content
tab_position: top
hide_inactive_tab_titles: false
remember_tab: "true"
- type: custom:mod-card
card_mod:
style: |
ha-card {
position: sticky;
bottom: 18px;
z-index: 999;
width: calc(100% - 44px);
max-width: 390px;
margin: 0 auto 18px auto;
padding: 6px;
border-radius: 30px;
background: rgba(30, 58, 47, 0.82) !important;
border: 1px solid rgba(168, 196, 154, 0.16);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
0 10px 28px rgba(0,0,0,0.22);
backdrop-filter: blur(16px);
}
card:
type: grid
square: false
columns: 1
cards:
- type: custom:paper-buttons-row
buttons:
- icon: mdi:home
layout: icon
name: Hjem
tap_action:
action: navigate
navigation_path: "#home"
styles:
button:
background: rgba(168, 196, 154, 0.18)
border-radius: 24px
width: 92px
height: 44px
display: flex
align-items: center
justify-content: center
icon:
color: "#EAD8B5"
margin-top: 0
"--mdc-icon-size": 24px
Smart AVG Aggregation: No more jagged curves or “gaps” in your data. The module calculates a mathematically smoothed average for a professional, clean look.
One-Click Presets: I’ve baked in smart color configurations for your everyday needs:
Total Layout Control: You asked, I delivered. Paddings are now set to 0 by default. You decide, down to the pixel, exactly how much space to leave for your buttons.
Tailored Aesthetics: Toggle the “Fill” on or off, adjust opacity, choose a fixed color or dynamic thresholds… the possibilities are endless.
Bug fixes and improvements
Announcement: Bubble Graph Pro v2.4.0 is out!
What’s new in v2.4.0?
Total Neon Compatibility: Thanks to a surgical CSS rewrite, the module now works perfectly alongside Bubble Neon. Your gradients will now span the entire card without any structural interference.
Streamlined Code: Redundant functions have been removed to lighten the module and prevent layout conflicts within Home Assistant.
), and adding a helpful migration dialog for users still using the old pop-up format.
New features and enhancements
).
