Not able to set a fixed scrollable size to dcc.Dropdown - Html

DDisciple
April 3, 2023
207 views
0 votes
2 Answers

I’m developing a Dash web application in python and I’m pretty new to the framework so I’m struggling to get the UI to behave as I want.

Basically I have the following UI with 2 dropdowns that allow me to filter and re-render the graph accordingly. The issue is that as I select more points from the dropdown, it inevitably grows to adjust for the list of currently selected options.

See pictures:

Right now I need to scroll down to see the dropdown list when a lot of items are already selected. But what I really just want is for this list to be horizontally scrollable so that the overall size of the containers I’ve set doesn’t change, hence it doesn’t push the containers below it further down. See issue below:

Here is my current code for the app_layout:

app.layout = html.Div([
    html.Div([
        html.H1('Summary:', style={'margin': '30px', 'align-items': 'center', 'color': '#555555'}),
        html.Div(
            id='output-summary',
            style={
                'width': '85%',
                'display': 'inline-block',
                'verticalAlign': 'top',
                'overflowY': 'scroll',
                'maxHeight': 'calc(100vh - 300px)',
                'padding': '20px'
            }
        )
    ], style={
        'width': '30%',
        'background': 'linear-gradient(270deg, rgba(92, 68, 62, 0.5), rgba(56, 32, 88, 0.5)',
        # Inverted gradient for left side div
        'height': '100%',
        'position': 'fixed',
        'left': 0,
        'top': 0,
        'bottom': 0,
        'box-shadow': '0px 4px 20px rgba(0, 0, 0, 0.1)',
        'overflowY': 'scroll',
        'z-index': '1',
    }),
    html.Div([
        html.Div([
            html.H1(colored_title, style={'color': '#FFFFFF', 'margin-left': '30px', 'margin-right': '15px'}),
            html.Div([
                dcc.Dropdown(
                    id='file-dropdown',
                    options=[
                        {'label': os.path.basename(path), 'value': os.path.basename(path)}
                        for path in file_paths
                    ],
                    multi=True,
                    value=[],
                    placeholder='Choose files...',
                    style={
                        'width': '100%',
                        'background-color': 'rgba(16, 16, 16, 0.3)',
                        'overflowY': 'scroll',
                        'border': 'none',
                        'margin': '16px',
                        'padding-right': '30px',
                        'font-size': '12px',
                        'line-height': '24px',
                        'z-index': '3',
                    }
                ),
                dcc.Dropdown(
                    id='package-dropdown',
                    options=[
                        {'label': package, 'value': package}
                        for package in package_files
                    ],
                    value=None,
                    placeholder='Choose a package...',
                    style={
                        'width': '100%',
                        'background-color': 'rgba(16, 16, 16, 0.3)',
                        'margin': '16px',
                        'padding-right': '30px',
                        'border': 'none',
                        'font-size': '12px',
                        'line-height': '24px',
                        'z-index': '3',
                    }
                ),
            ], style={'display': 'flex', 'height': '150px', 'justify-content': 'space-between', 'width': '100%'})
        ], style={'display': 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'width': '95%'}),
        dcc.RadioItems(
            id='open-file-radio',
            options=[
                {'label': 'Open File On Click', 'value': 'open_file'}
            ],
            style={'margin': '20px', 'color': '#FFFFFF'},  # Added color
            value=None,
            labelStyle={'display': 'block'}
        ),
        html.Div(id='scatter-plot-container',
                 children=[dcc.Graph(id='scatter-plot',
                                     figure=fig,
                                     clickData=None,
                                     style={'height': '650px', 'margin': '20px'})
                           ],
                 style={'width': '95%', 'margin': '10px', 'margin-left': '20px', 'display': 'inline-block',
                        'border-radius': '16px', 'background-color': 'rgba(255, 255, 255, 0.1)',
                        'box-shadow': '0px 4px 20px rgba(0, 0, 0, 0.1)', })
    ], style={
        'width': '70%',
        'margin-end': '20px',
        'height': '100%',
        'position': 'fixed',
        'right': 0,
        'top': 0,
        'bottom': 0,
        'background': 'linear-gradient(90deg, rgba(92, 68, 62, 0.5), rgba(56, 32, 88, 0.5)',
        'overflowY': 'scroll',
        'align-items': 'center',
        'box-shadow': '-8px 0px 20px rgba(0, 0, 0, 0.1)',
        'z-index': '4'
    })
])

Any help on this is greatly appreciated. Or if this is for some reason not possible I’m open to alternatives!

Thanks!

EDIT:

I’ve tried adding the css styling:

  display: flex;
  overflow-x: scroll;
}

#file-dropdown .Select-value {
  flex: 0 0 50px;
}

but I’m still seeing the issue as shown in the pic below:

Answers

- 5eb
- April 3, 2023 at 8:47 pm
- 0 votes
0
You could implement it by adding some css:
```
#file-dropdown .Select-multi-value-wrapper {
  display: flex; // Used so items get placed next to each other instead of underneath
  overflow-x: scroll; // Makes scrollbar show up when overflow in horizontal direction
}

#file-dropdown .Select-value {
  flex: 0 0 50px; // Used to set a fixed dropdown item size
}
```
I’ve used the dropdown id in the selectors here, but you could also add a className and use that.

I’ve also removed the the padding-right and margin from the dropdown style dictionaries and added this:
```
#file-dropdown {
  margin: 20px;
  padding: 20px;
}
```
I made these changes so certain elements don’t get cut off.
Login or Signup to reply.

Could you try to add 'overflow-y':'auto' to style of your html.Div.

    html.Div([
        dcc.Dropdown(
            id='file-dropdown',
            options=[{'label':x,'value':x} for x in df['location'].unique()],
            multi=True,
            value=[],
            placeholder='Choose files...',
            style={
                'width': '100%',
                'background-color': 'rgba(16, 16, 16, 0.3)',
                'overflowY': 'scroll',
                'border': 'none',
                'margin': '16px',
                'padding-right': '30px',
                'font-size': '12px',
                'line-height': '24px',
                'z-index': '3',
            }
        ),
        dcc.Dropdown(
            id='package-dropdown',
            options=[],
            value=None,
            placeholder='Choose a package...',
            style={
                'width': '100%',
                'background-color': 'rgba(16, 16, 16, 0.3)',
                'margin': '16px',
                'padding-right': '30px',
                'border': 'none',
                'font-size': '12px',
                'line-height': '24px',
                'z-index': '3',
            }
        ),
    ], style={'display': 'flex', 'height': '150px', 'justify-content': 'space-between', 'width': '100%',
              'overflow-y':'auto'})

Please signup or login to give your own answer.

Click here to cancel reply.

Not able to set a fixed scrollable size to dcc.Dropdown – Html

Answers