Search code examples
pythonplotly-dashdashboard

Keeping the virtual size of drop down menus unchanged in Dash - Python

I have multiple drop down menus having tens of options to select. As the user selects more and more options, the size of the drop down menu gets larger. Is there a way to keep the size unchanged and show the selections in a shorter way? I set the max width parameters in the style option, but it does not work as intended.

from dash import Dash, dcc, html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.Div(className="row", children=[
            html.Div(className='row', children=[
                html.Div(className='four columns', children=[

                    dcc.Dropdown(
                        options=[
                            {'label': 'North America', 'value': 'NA'},
                            {'label': 'Europe', 'value': 'EU'},
                            {'label': 'Asia', 'value': 'AS'}
                        ],
                        multi=True
                    )
                ]),
                html.Div(className='four columns', children=[
                    dcc.Dropdown(
                        options=[
                            {'label': 'United States', 'value': 'USA'},
                            {'label': 'Canada', 'value': 'CAN'},
                            {'label': 'France', 'value': 'FRA'},
                            {'label': 'Germany', 'value': 'GER'},
                            {'label': 'China', 'value': 'CHN'},
                            {'label': 'India', 'value': 'IND'}
                        ],
                        multi=True
                    )
                ]),
                html.Div(className='four columns', children=[
                    dcc.Dropdown(
                        options=[
                            {'label': 'New York City', 'value': 'NYC'},
                            {'label': 'Montreal', 'value': 'MTL'},
                            {'label': 'San Francisco', 'value': 'SF'},
                            {'label': 'London', 'value': 'LDN'},
                            {'label': 'Tokyo', 'value': 'TKY'},
                            {'label': 'Mumbai', 'value': 'MUM'}
                        ],
                        multi=True
                    )
                ])

            ]),

    ])
])

if __name__ == '__main__':
    app.run(debug=True)

enter image description here

Solution

  • I had the same styling issue and came up with this custom CSS that restyles the multi-selection component as follow: the selected values don't wrap and you can horizontally scroll to see them all, keeping the same height and width at all time.

    It's a matter of taste but can be useful, so I post it here:

    .Select--multi > .Select-control {
  display: flex;
  align-items: center;
}

.Select--multi .Select-multi-value-wrapper {
  flex: 1;
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  box-shadow: inset -7px 0 9px -7px rgb(187 187 187);
}

.Select-multi-value-wrapper::-webkit-scrollbar {
  display: none;
}