Select Cards Dropdown List Hidden Behind Other Elements

[wparker42]

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:

1. Create a popup within a vertical stack
2. Create a 2-column grid within the popup, and populate the grid with a select-type bubble card.
3. Create a second 2-column grid below the first, and populate that grid with a select-type bubble card.
4. 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

[JLaz7]

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.