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

Dash Python
1

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

2

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([
    dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'Option 1', 'value': 'opt1'},
            {'label': 'Option 2', 'value': 'opt2'},
            {'label': 'Option 3', 'value': 'opt3'},
        ],
        multi=True,
        value=[],
        style={'width': '200px'}  # Initial width
    ),

])

@app.callback(
    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__':
    app.run_server(debug=True)

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

1 Like
3

hi. No, it’s a little wrong.

2 Likes