Input Select in sub-button overlaps side of screen on mobile

[damomato]

Describe the bug
When using the input select entity as a sub-button, in a bubble card button card, the size of the drop down doesn't change. This problem is only on mobile and is due to the buttons being sized smaller on mobile.

The buttons are in a pop-up. The screenshot explains the issue better.

Expected behavior
Resize the dropdown to not exceed the width of the button card it's in.

Screenshots
Not sure why the picture is so big, sorry about that. I've also updated pop-up setting margins since screenshotting this.

YAML Relevant section:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: pop-up
    hash: "#lights"
    button_type: switch
    show_header: true
    entity: script.turn_off_house_lights
    margin_top_mobile: "-56px"
    bg_opacity: "100"
    shadow_opacity: "0"
    bg_blur: "14"
    styles: ""
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: separator
        name: Living room
        icon: mdi:sofa
        card_layout: large
        styles: |-
          .bubble-sub-button-icon {
            --mdc-icon-size: inherit !important;
          }
        sub_button:
          - entity: input_select.living_room_kitchen_light_brightness
            name: Brightness
            show_name: false
            show_icon: false
            show_background: false
            show_arrow: true
            show_attribute: false
            attribute: icon
      - type: horizontal-stack
        cards:
          - type: custom:bubble-card
            card_type: button
            entity: light.living_room_light
            scrolling_effect: false
            show_name: true
            sub_button:
              - entity: input_select.living_room_light_brightness
                show_icon: false
                state_background: true
                show_background: false
                show_arrow: true
                name: Brightness
                show_attribute: false
                attribute: options
            tap_action:
              action: toggle
              target: {}
            name: Living room
            show_icon: false
            show_attribute: false
            attribute: brightness
            show_last_changed: false
            show_state: false
            force_icon: false
            icon: mdi:light-recessed
            styles: ""
          - type: custom:bubble-card
            card_type: button
            entity: light.living_room_bookshelf_light
            scrolling_effect: false
            show_name: true
            sub_button: []
            tap_action:
              action: toggle
            name: Bookshelf
            icon: mdi:light-switch
            show_icon: false
        grid_options:
          columns: 12
          rows: 1

Informations (please complete the following information):

• OS: Android
• Bubble Card version: v2.3.0-beta.7
• Home Assistant version: 2024.11.2

Additional Info If there's any styling I can apply to reduce the width of the drop-down I'm happy to apply that.

[Clooos]

Hi! Indeed I need to fix that! But in the meantime you can change it with:

ha-card {
  --bubble-select-list-width: 150px;
}

This is pretty difficult to fix, so I'm not sure that I will change that for the next release, but I will not forget about that one 👌

[damomato]

Thats working perfectly thanks so much! Love your work by the way, I only started making my firt proper hass dashboard recently and its all bubble cards and looking fantastic. Keep it up!

While I have you just another question. This may be a more general hass question though, so if so let me know and I can go searching for the answer. I'm using the input select entity to run an automation (e.g. select Low and dim lights low) but I can also manually/physically change the light brightness, so I don't want the state I selected in the dropdown to save, so I can reselect it after. Do you know how to not make the state save in the dropdown after I select it?

[Clooos]

Tough one, I guess that the best way would be to create an automation that reset your input_select, even if I'm not sure that there is an easy way to detect if it was modified outside of your initial input_select automation.

I can't help you more on that but let me know if you found a way.

And thanks for the kind words!

[damomato]

Thanks I'll play around with resetting the state when the brightness changes. I only learned about input select recently so I'll have to do some reading and experimenting and will let you know how I go

[damomato]

Tough one, I guess that the best way would be to create an automation that reset your input_select, even if I'm not sure that there is an easy way to detect if it was modified outside of your initial input_select automation.

I can't help you more on that but let me know if you found a way.

And thanks for the kind words!

I made an additional option called 'Test' in my input select and then an automation with a trigger so when one of the options are selected, after 1 second the 'Test' option is then selected instead, which then doesnt trigger anything.

I tried making it so the trigger was when the brightness would change, but that didn't seem to trigger and the options there were limited. There was no increase/decrease brightnes trigger, unless I missed it.

Automation yaml below. I just have to add in all other options to the triggers.

alias: Living Room Light Brightness Clear
description: ""
triggers:
  - trigger: state
    entity_id:
      - input_select.living_room_light_brightness
    to: Low
    for:
      hours: 0
      minutes: 0
      seconds: 1
conditions: []
actions:
  - action: input_select.select_option
    metadata: {}
    data:
      option: Test
    target:
      entity_id: input_select.living_room_light_brightness
mode: single

A couple of question.

1. Is there a way to use styling to hide an option in the input_select entity? Or like only show first x number of options?
2. Is there a better way to do what I'm trying to do?

I know this isn't related to bubble cards now, so I need to ask elsewhere please let me know :)

Edit: I added an option which is blank (just a space from a spacebar) and moved it to the top of the options, and then changed the automation to select that one.

Ideally I would like that option to be hidden, but I'm like 80% happy with the solution so it's good enough. I'm surprised there's no way to have no option selected, that's essentially what I'm trying to do here.

[Clooos]

You could rename that empty option to "Custom" or "None", there is maybe a way to hide it with a custom style, but I know that some parts of it can't be edited, so I'm unsure.

[damomato]

I appreciate the suggestions but I might just leave it for now since it's working well enough. I'll keep an eye out for a solution but I'm pretty happy with it now.

I also realised the automation can trigger when the state 'changes to any state' so I can set triggers for each light and use the choose action to hit each of the light inputs selects, so at least that part is easy