dropdown list in picture elements card not working

[gerhardvilsecker]

Hello all,
I created a dishwasher custom card based on picture elements card. Unfortunately I dont get dropdown list for selecting of dishwasher programs properly working. I first developed dropdown list as standalone custom: mushroom-template-card. This is working like a charm. However after putting this code into picture elements card, i do have following situation:
a) custom:mushroot-template-card is properly shown
b) dropdown list element is properly shown
c) when I click on on selection element - dropdown list does not appear :-(

Screenshots for working standalone element:
base:

dropdown opened:

Selection is working. Action after selection is also woking

Screenshots for partly working element in picture elements card:
base:

When I click on element nothing happens...

Here is the code for custom: mushroom-template-element inside an picture element card:

- type: conditional
    conditions:
      - condition: state
        entity: select.siemens_406020396133005383_programs
        state_not: unavailable
      - condition: state
        entity: binary_sensor.siemens_406020396133005383_bsh_common_status_doorstate
        state_not: "on"
      - condition: null
        entity: sensor.siemens_406020396133005383_bsh_common_status_operationstate
        state_not: BSH.Common.EnumType.OperationState.Run
    elements:
      - type: custom:mushroom-template-card
        entity: select.siemens_406020396133005383_programs
        primary: Programmwahl
        secondary: >-
          {% set program = { 'Dishcare.Dishwasher.Program.Quick65': 'Schnell
          65°', 'Dishcare.Dishwasher.Program.Quick45': 'Schnell 45°',
          'Dishcare.Dishwasher.Program.Eco50': 'Eco 50°',
          'Dishcare.Dishwasher.Program.PreRinse': 'Vorspülen',
          'Dishcare.Dishwasher.Program.Intensiv70': 'Intensiv 70°',
          'Dishcare.Dishwasher.Program.Auto2': 'Auto',
          'Dishcare.Dishwasher.Program.MachineCare': 'Maschinenpflege'} %} {{
          program.get(states('select.siemens_406020396133005383_programs') ) }}
        vertical: false
        features_position: bottom
        features:
          - type: custom:service-call
            entries:
              - type: dropdown
                entity_id: select.siemens_406020396133005383_programs
                options:
                  - entity_id: select.siemens_406020396133005383_programs
                    option: Dishcare.Dishwasher.Program.Quick65
                    tap_action:
                      action: perform-action
                      perform_action: select.select_option
                      data:
                        option: Dishcare.Dishwasher.Program.Quick65
                      target:
                        entity_id: select.siemens_406020396133005383_programs
                    label: Schnell 65
                    icon: mdi:clock-fast
                    styles: |-
                      .icon{
                        color: #00FFF2;
                      }
                  - entity_id: select.siemens_406020396133005383_programs
                    option: Dishcare.Dishwasher.Program.Quick45
                    tap_action:
                      action: perform-action
                      perform_action: select.select_option
                      data:
                        option: Dishcare.Dishwasher.Program.Quick45
                      target:
                        entity_id: select.siemens_406020396133005383_programs
                    label: Schnell 45
                    icon: mdi:clock-fast
                    styles: |-
                      .icon{
                       color: #00FFF2;
                      }    
                  - entity_id: select.siemens_406020396133005383_programs
                    option: Dishcare.Dishwasher.Program.Eco50
                    tap_action:
                      action: perform-action
                      perform_action: select.select_option
                      data:
                        option: Dishcare.Dishwasher.Program.Eco50
                      target:
                        entity_id: select.siemens_406020396133005383_programs
                    label: Eco 50
                    icon: mdi:leaf
                    styles: |-
                      .icon{
                        color: #29FF8F;
                      }
                  - entity_id: select.siemens_406020396133005383_programs
                    option: Dishcare.Dishwasher.Program.PreRinse
                    tap_action:
                      action: perform-action
                      perform_action: select.select_option
                      data:
                        option: Dishcare.Dishwasher.Program.PreRinse
                      target:
                        entity_id: select.siemens_406020396133005383_programs
                    label: Vorspülen
                    icon: mdi:water
                    styles: |-
                      .icon{
                        color: #29C2FF;
                      }
                  - entity_id: select.siemens_406020396133005383_programs
                    option: Dishcare.Dishwasher.Program.Intensiv70
                    tap_action:
                      action: perform-action
                      perform_action: select.select_option
                      data:
                        option: Dishcare.Dishwasher.Program.Intensiv70
                      target:
                        entity_id: select.siemens_406020396133005383_programs
                    label: Intensiv 70
                    icon: mdi:dishwasher-alert
                    styles: |-
                      .icon{
                       color: #FF684D;
                      }
                  - entity_id: select.siemens_406020396133005383_programs
                    option: Dishcare.Dishwasher.Program.Auto2
                    tap_action:
                      action: perform-action
                      perform_action: select.select_option
                      data:
                        option: Dishcare.Dishwasher.Program.Auto2
                      target:
                        entity_id: select.siemens_406020396133005383_programs
                    label: Auto
                    icon: mdi:auto-fix
                    styles: |-
                      .icon{
                       color: #29C2FF;
                      }
                  - entity_id: select.siemens_406020396133005383_programs
                    option: Dishcare.Dishwasher.Program.MachineCare
                    tap_action:
                      action: perform-action
                      perform_action: select.select_option
                      data:
                        option: Dishcare.Dishwasher.Program.MachineCare
                      target:
                        entity_id: select.siemens_406020396133005383_programs
                    label: Machinenpflege
                    icon: mdi:auto-fix
                    styles: |-
                      .icon{
                       color: #29C2FF;
                      }    
        card_mod:
          style: |
            :host {
              --mdc-select-label-ink-color: orange;
              --mdc-theme-primary: green;
              --mdc-select-fill-color: grey;
              --mdc-menu-item-height: 22px;
              --mdc-theme-text-primary-on-background: white;
              --mdc-theme-primary: red;
              --mdc-theme-surface: grey; 
              --mdc-select-select-height: 10px;
              top: 40% !important;
              left: 50% !important;
            }
            ha-card {
                background-color: transparent;
                height: 100px !important;
                width: 200px;
            }

Any help would be very appreciated.

[Nerwyn]

This is a bug caused by positioning the dropdown menu using a fixed position rather than an absolute one. It also happens when you open the dropdown preview in the editor. It should be fixed in version 4.9.2.

That being said, the picture elements card ha-card element hides overflow by default. You may need to use card-mod to set ha-card overflow to visible and z-index to 1 if your dropdown would extend outside of the picture card.

[gerhardvilsecker]

thank you for quick answer. I updated to 4.9.2. Added z-index: 1 and overflow: visible to picture-elements card. No success.
When I open developper tools in chrome, i can see the dropdown depending on current focus of window (somtimes i have to move scrollbar to see the dropdown. May I ask for which element I have to set z-index and overflow? Is it for the entire picture elements card, or rather for my mushroom-templatte-card element?

[Nerwyn]

Try clearing cache and re-updating. Also check that the dropdown is properly positioned in the card editor and dashboard outside of the picture elements card.

set ha-card overflow to visible and z-index to 1

[gerhardvilsecker]

Its a conditional element inside picture elements card. How can I position it outside the the picture elements card? I dont believe this is possible...

[Nerwyn]

As a standalone element like you did in your original post, to test that it's still working at all and I didn't break something/make things worse with my fix.

[gerhardvilsecker]

Ok. Understand. I can confirm that standalone element is still perfectly working with 4.9.2. I tested with:
-chorome on windows
-chrome on Android
-companion app on Android
If this turns out to be to much effort we could stop here. No problem. I have my picture element card running with dropdown menu from mushroom-cards. This was also not so easy to implement. But I foud a good website documenting css features of mushroom cards.
However: Mushroom dropdown cannot be customized in terms of providing an icon per dropdown element. Which is a very nice feature of your solution. I very like that :-)