Add Scroll Bar Inside the dcc.Dropdown Menu after selecting the item

Dash Python
1

Hi, I am trying to add a scroll bar Y-axis inside the DCC. Dropdown box as I don’t want it to expand as and when I select multiple items from the list.

Here is the screenshot.

image

here is the layout

html.Div([
            dbc.Row([
                dbc.Col([
                    dcc.Dropdown(
                        id='segment',
                        options=[{'label': i, 'value': i} for i in df['name_id'].unique()],
                        persistence=True, persistence_type='memory',
                        multi=True,
                        style={'width': '500px', 'display': 'inline-block'}, optionHeight=70,
                        placeholder='Segment'),
                ], style={'margin-top': 80, 'margin-left': -315, 'display': 'table-cell', 'verticalAlign': 'middle',
                          })
            ])])
1 Like
2

@dash Can anyone help me with this logic.

3

Can any one help me with this??

4

hi @MishD

Have you tried:

style={ "overflow-y":"scroll", "height": "100px"},

(or whatever height you want it to be)

5

I tried this but it still not working and that dropdown just disappears.
Here is the screen shot and code
image

html.Div([
            dbc.Row([
                dbc.Col([
                    dcc.Dropdown(
                        id='segment',
                        options=[{'label': i, 'value': i} for i in df['name_id'].unique()],
                        persistence=True, persistence_type='memory',
                        multi=True,
                        style={'width': '645px', 'display': 'inline-block',
                               'height': '90px', "overflow-y":"scroll"}, optionHeight=70,
                        placeholder='Segment'),
                ], style={'margin-top': 20, 'margin-left': -250, 'display': 'table-cell',
                          'verticalAlign': 'middle',
                          # 'overflow-x': 'hidden'
                          })
            ])])
6

I have the same problem and would really appreciate any further solutions.

7

@lisiarend @MishD You can use the following code to solve this. It worked perfectly for me.
style = {'max-height': '280px', 'overflow-y': 'auto'}
Hope this helps! :smiley:

1 Like