Change options width inside dorpdown

Dash Python
1

Is there a way to change the width of the options in a dropdown? Not just the width of the dropdown, but also the width of the options once you click the down arrow.
I have the dropdown in a dbc column:

dbc.Col([
            html.Label(['Choose a sensing matrix:'], style={'font-weight': 'bold', "text-align": "center"}),
            dcc.Dropdown(id='sensing_mtrx',
                         options=[{'label': x, 'value': x} for x in df['MATRIX'].unique()],
                         value='ANTIPODAL',
                         multi=False,
                         disabled=False,
                         clearable=False,
                         searchable=False,
                         placeholder='Choose sensing matrix...',
                         style={'width': "60%"},
            ),
        ], # width={'size': 7, 'offset': 0},
           xs=12, sm=12, md=12, lg=7, xl=7 #Specify width for different screen sizes
        )
2

Hi @adt0192 and welcome to the Dash community :slight_smile:

Try adding this to a .css file in the assets folder



.Select-menu-outer {
  width: 60%; 
}
1 Like
3

Great :slight_smile: .
Thanks a lot!!!

1 Like