How to increase dcc.Dropdown width with an increase in the number of selected parameters

I want to make dcc.Dropdown with the multi=True property expanded without changing the height with an increase in the number of selected parameters. and returned to the originally set width when removing the parmeters. Maybe someone did something similar

Hey, is this what youre looking for?

from dash import dcc, html, Dash
from dash.dependencies import Input, Output

app = Dash(__name__)

app.layout = html.Div([
            {'label': 'Option 1', 'value': 'opt1'},
            {'label': 'Option 2', 'value': 'opt2'},
            {'label': 'Option 3', 'value': 'opt3'},
        style={'width': '200px'}  # Initial width


    Output('my-dropdown', 'style'),
    Input('my-dropdown', 'value')
def update_dropdown_width(selected_values):
    num_selected = len(selected_values)

    width_percent = max(200, num_selected * 120) 
    updated_style = {'width': f'{width_percent}px'}
    return updated_style

if __name__ == '__main__':

You could also add width based on the length of the label.

1 Like

hi. No, it’s a little wrong.

1 Like