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

**URL:** <https://community.plotly.com/t/how-to-increase-dcc-dropdown-width-with-an-increase-in-the-number-of-selected-parameters/79259>\
**Category:** Dash Python\
**Created:** [October 11, 2023, 7:06pm UTC](https://community.plotly.com/t/how-to-increase-dcc-dropdown-width-with-an-increase-in-the-number-of-selected-parameters/79259 "2023-10-11T19:06:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![alesia](https://avatars.discourse-cdn.com/v4/letter/a/9de0a6/32.png) [@alesia](https://community.plotly.com/u/alesia)\
**Post date:** [October 11, 2023, 7:06pm UTC](https://community.plotly.com/t/how-to-increase-dcc-dropdown-width-with-an-increase-in-the-number-of-selected-parameters/79259/1 "2023-10-11T19:06:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Louis](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@Louis](https://community.plotly.com/u/Louis)\
**Post date:** [October 14, 2023, 7:50am UTC](https://community.plotly.com/t/how-to-increase-dcc-dropdown-width-with-an-increase-in-the-number-of-selected-parameters/79259/2 "2023-10-14T07:50:02Z")

</div>

Hey, is this what youre looking for?

```auto
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.

---

<div class="post-metadata">

**Author:** ![alesia](https://avatars.discourse-cdn.com/v4/letter/a/9de0a6/32.png) [@alesia](https://community.plotly.com/u/alesia)\
**Post date:** [October 14, 2023, 9:19am UTC](https://community.plotly.com/t/how-to-increase-dcc-dropdown-width-with-an-increase-in-the-number-of-selected-parameters/79259/3 "2023-10-14T09:19:31Z")

</div>

hi. No, it’s a little wrong.