Clooos
Select Cards Dropdown List Hidden Behind Other Elements
Describe the bug
With two select cards, stacked vertically within separate grids of a popup, one of the select cards options gets hidden behind other popup content.
To Reproduce
Steps to reproduce the behavior:
- Create a popup within a vertical stack
- Create a 2-column grid within the popup, and populate the grid with a select-type bubble card.
- Create a second 2-column grid below the first, and populate that grid with a select-type bubble card.
- The drop-down options of the upper select card appear behind the lower select card.
Expected behavior
Drop-down options should appear in front of all other elements.
Screenshots
Upper select options hidden behind lower select card:
Lower select options correctly populate in front of all other elements:
YAML
If applicable, add any relevant YAML code.
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#lights"
show_header: true
name: Lights
show_icon: false
button_type: name
styles: |-
.bubble-button-card-container {
background: none !important;
}
.bubble-name {
font-size: 20px !important;
font-weight: lighter;
font-variant: small-caps;
}
.bubble-name-container.name-without-icon {
margin-left: 10px;
}
- type: custom:bubble-card
card_type: separator
name: h o u s e
styles: |-
* {
font-size: 14px !important;
}
sub_button:
- entity: light.living_room_lamp
icon: mdi:power
tap_action:
action: perform-action
perform_action: ""
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.living_room_lamp
icon: mdi:floor-lamp
scrolling_effect: false
name: Living Room Lamp
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-lvgrmlamp"
visibility:
- condition: state
entity: light.living_room_lamp
state: "on"
styles: ""
show_icon: true
use_accent_color: true
slider_live_update: true
- type: custom:bubble-card
card_type: button
button_type: slider
name: Kitchen Lights
entity: light.kitchen_lights
show_attribute: false
attribute: brightness
icon: mdi:ceiling-light-multiple
tap_action:
action: toggle
sub_button:
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-kitchenlights"
visibility:
- condition: state
entity: light.kitchen_lights
state: "on"
show_icon: true
show_state: false
double_tap_action:
action: none
hold_action:
action: more-info
styles: ""
use_accent_color: true
slider_live_update: true
- type: custom:bubble-card
card_type: button
button_type: slider
entity: input_number.lyra_log_brightness
icon: mdi:floor-lamp
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
scrolling_effect: false
sub_button:
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-lyra"
visibility:
- condition: state
entity: light.lyra
state: "on"
show_icon: true
name: Lyra
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.tv_backlight
scrolling_effect: false
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-tvbacklight"
visibility:
- condition: state
entity: light.tv_backlight
state: "on"
styles: ""
show_icon: true
use_accent_color: true
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: button
entity: light.hall
name: Hallway
icon: mdi:globe-light
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
columns: 2
button_type: slider
sub_button:
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-hall"
visibility:
- condition: state
entity: light.hall
state: "on"
show_icon: true
use_accent_color: true
- type: custom:bubble-card
card_type: button
entity: light.bathroom_switch
name: Bathroom
icon: mdi:shower
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
columns: 2
button_type: slider
force_icon: false
show_icon: true
use_accent_color: true
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
columns: 2
- type: custom:bubble-card
card_type: separator
name: o u t s i d e
styles: |-
* {
font-size: 14px !important;
}
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.front_door_light
icon: mdi:light-switch
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
name: Front Door
use_accent_color: true
sub_button:
- entity: light.12_e9_00_05_da_11_strip
hold_action:
action: more-info
tap_action:
action: toggle
- entity: light.spotlights
hold_action:
action: more-info
light_background: false
show_background: true
state_background: true
show_last_changed: false
show_state: false
tap_action:
action: toggle
show_icon: true
show_state: false
show_attribute: false
attribute: brightness
- type: custom:bubble-card
card_type: button
entity: light.deck_lights_outlet
show_state: false
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
button_action:
double_tap_action:
action: none
columns: 2
show_icon: true
use_accent_color: true
icon: mdi:string-lights
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
columns: 2
- type: custom:bubble-card
card_type: separator
name: b e d r o o m
styles: |-
* {
font-size: 14px !important;
}
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.b_wall
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-bwall"
visibility:
- condition: state
entity: light.b_wall
state: "on"
name: Wall
icon: mdi:wall-sconce-flat-variant
styles: ""
show_icon: true
use_accent_color: true
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.closet_lights
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-closet"
visibility:
- condition: state
entity: light.closet_lights
state: "on"
name: Closet
icon: mdi:wall-sconce-flat
show_icon: true
use_accent_color: true
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.bedside
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- entity: light.bedside_2_homebridge
icon: mdi:lightbulb
tap_action:
action: toggle
hold_action:
action: more-info
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-bedside"
visibility:
- condition: state
entity: light.bedside_lifx
state: "on"
icon: mdi:lamp
show_icon: true
use_accent_color: true
- type: custom:bubble-card
card_type: select
button_type: state
show_state: true
icon: mdi:scent
double_tap_action:
action: none
hold_action:
action: none
button_action:
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
name: Theme
show_last_updated: false
show_attribute: false
show_name: true
card_layout: normal
columns: 2
scrolling_effect: false
attribute: friendly_name
show_last_changed: false
sub_button: []
styles: |
ha-card {
opacity: 0.95;
--bubble-select-background-color: rgb(194, 178, 128, 0.3) !important;
}
entity: input_select.bedroom_scene_selector
select_attribute: effect_list
tap_action:
action: none
show_icon: false
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
columns: 2
- type: custom:bubble-card
card_type: separator
name: s t u d i o
styles: |-
* {
font-size: 14px !important;
}
- square: false
type: grid
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.s_wall
name: Wall
icon: mdi:wall-sconce-flat-variant
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-swall"
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.studio_string_light
name: String Lights
icon: mdi:led-strip-variant
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-sstring"
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.s_lamp
name: Lamp
icon: mdi:light-flood-up
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- entity: light.salt_lamp
icon: mdi:lava-lamp
tap_action:
action: toggle
hold_action:
action: more-info
- icon: mdi:palette
show_background: false
tap_action:
action: navigate
navigation_path: "#color-picker-slamp"
- type: custom:bubble-card
card_type: select
button_type: state
show_state: true
icon: mdi:scent
double_tap_action:
action: none
hold_action:
action: none
button_action:
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
name: Theme
show_last_updated: false
show_attribute: false
show_name: true
card_layout: normal
columns: 2
scrolling_effect: false
attribute: friendly_name
show_last_changed: false
sub_button: []
styles: |
ha-card {
opacity: 0.95;
--bubble-select-background-color: rgb(194, 178, 128, 0.3) !important;
}
entity: input_select.studio_scene_selector
select_attribute: effect_list
tap_action:
action: none
show_icon: false
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
columns: 2
Informations (please complete the following information):
- OS: MacOS 15.1.1
- Browser/App: chrome, safari
- Bubble Card version: 2.4.0-beta.1
- Home Assistant version: 2025.1.4
Let me know if I should create a new issue for this but I have the exact same issue with any bubble dropdown-select card. The only difference is I'm not doing it inside a pop-up card. Just at the top level or on the main page of my dashboard.
Thanks for the workaround of putting the select dropdown at the bottom so that it displays upwards. That's the only time I can get it to display in front of the other cards.
Commenting to add an additional instance where a select card is blocked by other bubble card elements. This select card is out of the box, with no custom css applied.
Hi! Can you try to use an horizontal stack instead of a grid? This should works this way.
I am facing a similar problem with the select-card. When using it in a vertical-stack-in-card or vertical-stack-card, the drop down list gets cut off, i.e. it does not paint over the boundaries of the stacked cards.
@Clooos v2.5.0 b9 shows the same issue of the dropdown hiding behind other cards/ other bubble card entities.
I am having the same issue when using the sections layout, cards are not in a grid or stack of any kind. Currently using V3.0.0 beta 4
Still seeing this issue in 3.0.0-beta5, tested with grid and horizontal stack. Interestingly, select options that populate upwards are displayed above other elements while lists that populate downward are hidden behind elements. The last version where this wasn't an issue for me was v2.4.0.
Hi! I just tried and I'm unable to reproduce this in v3.0.0-beta.6, can anyone confirm this?
Also before replying, please check at the bottom of the editor if you see the correct version, because there is currently an HACS issue that cause some updates to don't install the correct beta.
I'm running v3.0.0-beta.6 and I can confirm that the input selects are displayed properly.
I'm running v3.0.0-beta.6 and still seeing the issue with select lists that populate downward.
However, select lists that populate upward display correctly
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#lights"
show_header: true
name: " "
show_icon: false
button_type: name
styles: |-
.bubble-button-card-container {
background: none !important;
}
.bubble-name {
font-size: 20px !important;
font-weight: lighter;
font-variant: small-caps;
}
.bubble-name-container.name-without-icon {
margin-left: 10px;
}
modules:
- default
- type: custom:bubble-card
card_type: separator
name: ""
styles: |-
* {
font-size: 14px !important;
}
sub_button:
- entity: light.house_lights_group
icon: mdi:power
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.house_lights
data:
transition: 3
light_background: false
visibility:
- condition: state
entity: light.house_lights_group
state: "on"
- type: grid
square: false
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.living_room_lamp
icon: mdi:floor-lamp
scrolling_effect: false
name: ""
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button: []
styles: ""
show_icon: true
use_accent_color: true
button_action:
double_tap_action:
action: none
modules: []
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.lyra
icon: mdi:drag-vertical-variant
scrolling_effect: false
name: ""
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button: []
styles: ""
show_icon: true
use_accent_color: true
button_action:
double_tap_action:
action: none
modules: []
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.tv_backlight
scrolling_effect: false
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button: []
styles: ""
show_icon: true
use_accent_color: true
button_action:
double_tap_action:
action: none
name: ""
- type: custom:bubble-card
card_type: button
entity: light.hall
name: Hallway
icon: mdi:globe-light
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
columns: 2
button_type: slider
sub_button: []
show_icon: true
use_accent_color: true
button_action:
double_tap_action:
action: none
modules:
- default
- type: custom:bubble-card
card_type: button
entity: light.bathroom_switch
name: Bathroom
icon: mdi:shower
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
columns: 2
button_type: slider
force_icon: false
show_icon: true
use_accent_color: true
button_action:
double_tap_action:
action: none
columns: 2
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: separator
name: k i t c h e n
styles: |-
* {
font-size: 14px !important;
}
sub_button:
- entity: light.house_lights_group
icon: mdi:power
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.house_lights
data:
transition: 3
light_background: false
visibility:
- condition: state
entity: light.house_lights_group
state: "on"
modules:
- default
- type: grid
square: false
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
name: Kitchen Lights
entity: light.kitchen_lights_group
show_attribute: false
attribute: brightness
icon: mdi:ceiling-light-multiple
tap_action:
action: toggle
sub_button: []
show_icon: true
show_state: false
double_tap_action:
action: none
hold_action:
action: more-info
styles: ""
use_accent_color: true
button_action:
double_tap_action:
action: none
modules:
- default
- type: custom:bubble-card
card_type: button
name: Countertop
icon: mdi:drag-horizontal-variant
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
columns: 2
button_type: slider
force_icon: false
show_icon: true
use_accent_color: true
button_action:
double_tap_action:
action: none
entity: light.magwled
modules:
- default
columns: 2
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: separator
name: b e d r o o m
styles: |-
* {
font-size: 14px !important;
}
sub_button:
- entity: input_select.bedroom_scene_selector
icon: mdi:palette-outline
show_background: false
- entity: light.bedroom_lights_group
icon: mdi:power
light_background: false
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.bedroom_lights_group
data:
transition: 3
visibility:
- condition: state
entity: light.bedroom_lights_group
state: "on"
modules:
- default
- type: grid
square: false
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.b_wall
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button: []
name: Wall
icon: mdi:wall-sconce-flat-variant
styles: ""
show_icon: true
use_accent_color: true
button_action:
double_tap_action:
action: none
modules:
- default
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.closet_lights_group
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button: []
name: Closet
icon: mdi:wall-sconce-flat
show_icon: true
use_accent_color: true
button_action:
double_tap_action:
action: none
modules:
- default
- type: custom:bubble-card
card_type: button
button_type: slider
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- entity: light.bedside_2_homebridge
icon: mdi:lightbulb
tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:lamp
show_icon: true
use_accent_color: true
button_action:
double_tap_action:
action: none
hold_action:
action: more-info
modules:
- default
entity: light.bedside_lifx
name: Bedside
- type: custom:bubble-card
card_type: button
button_type: slider
modules:
- default
entity: light.apollo_msr_2_0fa580_rgb_light
name: Nitelite
icon: mdi:star-crescent
hold_action:
action: more-info
tap_action:
action: toggle
button_action:
hold_action:
action: more-info
columns: 2
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: separator
name: s t u d i o
styles: |-
* {
font-size: 14px !important;
}
sub_button:
- entity: input_select.studio_scene_selector
icon: mdi:palette-outline
state_background: false
show_background: false
- entity: light.studio_lights_group
icon: mdi:power
light_background: false
state_background: true
show_background: true
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.studio_lights_group
data:
transition: 3
visibility:
- condition: state
entity: light.studio_lights_group
state: "on"
- type: grid
square: false
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.s_wall
name: Wall
icon: mdi:wall-sconce-flat-variant
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button: []
use_accent_color: true
button_action:
double_tap_action:
action: none
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.studio_string_light
name: String Lights
icon: mdi:led-strip-variant
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button: []
use_accent_color: true
button_action:
double_tap_action:
action: none
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.s_lamp
name: Lamp
icon: mdi:light-flood-up
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
sub_button:
- entity: light.salt_lamp
icon: mdi:lava-lamp
tap_action:
action: toggle
hold_action:
action: more-info
use_accent_color: true
styles: ""
button_action:
double_tap_action:
action: none
- type: custom:bubble-card
card_type: button
entity: switch.studio_monitors
name: Monitors
icon: mdi:speaker
show_last_changed: false
show_state: true
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
button_action:
double_tap_action:
action: none
sub_button:
- entity: switch.pedal_power
hold_action:
action: more-info
name: Pedals
icon: mdi:guitar-pick-outline
show_state: false
show_name: false
tap_action:
action: toggle
visibility:
- condition: user
users:
- 6edbf42c2b72436dbf608d5089a41e36
styles: |-
.bubble-sub-button.background-on {
background-color: cornflowerblue;
}
columns: 2
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: separator
name: o u t s i d e
styles: |-
* {
font-size: 14px !important;
}
sub_button:
- entity: light.outdoor_lights_group
icon: mdi:power
light_background: false
state_background: true
show_name: false
tap_action:
action: perform-action
perform_action: light.turn_off
target:
entity_id: light.outdoor_lights_group
data: {}
visibility:
- condition: state
entity: light.outdoor_lights_group
state: "on"
- type: custom:bubble-card
card_type: button
button_type: name
show_icon: false
scrolling_effect: false
show_name: false
sub_button:
- entity: light.front_door_light
hold_action:
action: more-info
name: Front Door
light_background: false
show_icon: true
show_state: false
show_name: false
tap_action:
action: toggle
icon: mdi:home-variant-outline
- entity: light.12_e9_00_05_da_11_strip
hold_action:
action: more-info
name: Front String
show_name: false
light_background: false
tap_action:
action: toggle
- entity: light.spotlights
hold_action:
action: more-info
light_background: false
show_name: false
show_icon: true
name: Front Yard
tap_action:
action: toggle
icon: mdi:pine-tree-variant-outline
- entity: light.deck_lights_outlet
hold_action:
action: more-info
name: Deck
light_background: false
show_icon: true
show_name: false
tap_action:
action: toggle
icon: mdi:string-lights
show_state: false
styles: |-
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-button-card-container {
background: none;
}
.bubble-sub-button {
height: 36px !important;
width: 66px !important;
}
.bubble-sub-button.background-on {
background-color: var(--bubble-accent-color);
}
.bubble-sub-button-container {
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
I just tried you exact YAML:
What theme are you using? Also, can you try with another theme to see if it happens as well?
I removed the theme and still had the same issue. However, I found that turning off the default module for the card fixes the issue. I don't have much in bubble-modules.yaml so still not sure of the root cause, but turning off the default module consistently fixes this issue for me.
default:
name: Default
description: Empty and enabled by default. Move your styles/templates here to apply them to all cards.
code: |
/* CSS or JS templates (see examples below) */
ha-card {
font-size: 14px;
opacity: 0.95;
}
.bubble-icon {
opacity: 1 !important;
}
Default Module On
Default Module Off
That's what I was expecting but I was not seeing any opacity change in your YAML. For an obscure CSS reason, setting an opacity different to 1 to the dropdown (or its direct container, like the ha-card in your case) cause this exact same issue. I already tried in the past to find a way to fix this without any success.
So to everyone here, check the styles you have applied, this is also possible that this happen with other CSS changes, but the opacity is definitely not working with the dropdown.
Thanks for all the help tracking this issue down - sincerely appreciate all the effort you put into this project.
I know this issue was closed a while ago, but just wanted to follow up in case other people come across it. I found a workaround that works with a caveat.
I'm using transparent cards and am able to get my popup to appear on top if I set the z-index of my select bubble card. In doing so, the whole card is at a higher index and when the select menu opens, it too is above the others.
This works great for me as I only have a single select card in my dashboard, however if I were to add another (or at least another close enough that the popup would overlap with the card) I'd run into the same issue where the select menu is behind the card because they're both at the same z-index and whichever element is rendered 2nd would be on top.
Here's a screenshot and some (simplified) yaml.
type: custom:bubble-card
card_type: select
entity: input_select.my_device
name: Mode
show_state: true
styles: |-
.bubble-container {
z-index: 1 !important;
}
Default select menu
sub_button_wheel module
Hi! This is interesting, I will try to add an higher z-index when a dropdown is open. I will see if this is a nice workaround for that case 👌
Thanks for the feedback!