Dropdown be shrunk when clear options

Dash Python
1

Hi, I’m trying to ’ arrange html and components inline but Dropdown components be shrunk when cleared. Below is my sample code:

import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            html.H6('Template', style={'text-align': 'left'}),
            dcc.Dropdown(id='template',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True)
        ], width={'size': 12, "offset": 0, 'order': 1},className="hstack gap-3"),
    ], className='p-2 align-items-center'),
])

if __name__ == "__main__":
    app.run_server(debug=False)

I’m using className="hstack gap-3" to make a gap between html.H6 and dcc.Dropdown and below is the result:
Screenshot 2022-10-19 162602

And when clearing options, it will be shown as below:
Screenshot 2022-10-19 162623

So I want to ask is there anyway (which className should I use) to arrange html and components inline but width of dropdown (columns) not be changed?

Actually I can use below code to arrange html and components inline but I don’t want to add so much Columns:

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            html.H6('Template', style={'text-align': 'left'})
        ], width={'size': 1, "offset": 0, 'order': 1}),
        dbc.Col([
            dcc.Dropdown(id='template',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True)
        ], width={'size': 11, "offset": 0, 'order': 1}),
    ], className='p-2 align-items-center'),
])

if __name__ == "__main__":
    app.run_server(debug=False)

Screenshot 2022-10-19 163103
Screenshot 2022-10-19 1631031918×66 2.81 KB

Thank you.

2

Hi @hoatran ,

you could add a minimum width, for example 200, for the dccDropdown:

            dcc.Dropdown(id='template',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True,
                                style={'minWidth': 200})
1 Like
3

@AIMPED: Thank for your help, I have another question that how can we set minWidth as the maximum width of column? For example dbc.Col width is 6 and I want to set minWidth of dropdown = dbc.Col width. Thank you.

4

Hi @hoatran ,

I am not sure, my experience with css is quite limited. But you can specify relative values such as style={'minWidth': '50%'}.

Maybe this helps:

Otherwise I am pretty sure @jinnyzor knows the exact answer to this.

1 Like
5

@AIMPED: Thank you, so my goal is not set minWidth as the fixed number but based on width of columns.

Untitled1
Untitled11922×1030 42.9 KB

As the above picture, red line is the end of dbc.Col 6 and If we set style={'minWidth': '50%'}, dropdown will overlap red line. So what I want is that dropdown width is same with red line.

6

Hello @hoatran,

Since your drop-down is inside of a container already, you should be able to give it a min width of 100% to fill up the container.

And wrap your two elements in another dbc row or column and adjust that container to be the width.

1 Like
7

The reason for this could be, that your first dbc.Col in your dbc.Row has a width of 1. So if I’m not mistaken, your dbc.Col for your dcc.Dropdown should have a width of 5

EDIT: I am referring to your second code snippet you posted initially.

1 Like
8

@jinnyzor: I’m sorry but can you help me to write a sample code?
@AIMPED: as I said, I can add 2 columns, one for html and set width as 1, and one column for dropdown and set width as 5. But in my case, I just one to use one columns for both html and dropdown and set width of columns as 6, but I don’t want width of dropdown exceeds column width.

9

So if I use layout = html.Div and set minWidth = 100% dropdown width will be page width:

import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            html.H6('Template', style={'text-align': 'left'}),
            dcc.Dropdown(id='template',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True,
                         style={'minWidth': '100%'})
        ], width={'size': 12, "offset": 0, 'order': 1},className="hstack gap-3"),
    ], className='p-2 align-items-center'),
])

if __name__ == "__main__":
    app.run_server(debug=False)

Screenshot 2022-10-19 180621
Screenshot 2022-10-19 1806211920×155 30 KB

And if I changed layout from html.Div to dbc.Container and use below code:

import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H6('Template', style={'text-align': 'left'}),
            dcc.Dropdown(id='template',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True,
                         style={'minWidth': '100%'})
        ], width={'size': 6, "offset": 0, 'order': 1},className="hstack gap-3"),
        dbc.Col([
            html.H6('Template', style={'text-align': 'left'}),
            dcc.Dropdown(id='template2',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True,
                         style={'minWidth': '100%'})
        ], width={'size': 6, "offset": 0, 'order': 1},className="hstack gap-3"),
    ], className='p-2 align-items-center'),
])

if __name__ == "__main__":
    app.run_server(debug=False)

It showed like below:

Screenshot 2022-10-19 180859
Screenshot 2022-10-19 1808591920×165 31.5 KB

The second html be overlapped.

10

If you dont want it to be in the center, then you can do this (I removed it from the container). Adjusted the minwidths to fill up the column, since the components were next to each other:

import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = dbc.Row([
        dbc.Col([
            html.H6('Template', style={'text-align': 'left', 'minWidth': '10%'}),
            dcc.Dropdown(id='template',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True,
                         style={'minWidth': '90%'})
        ], width=6,className="hstack gap-3"),
        dbc.Col([
            html.H6('Template', style={'text-align': 'left','minWidth': '10%'}),
            dcc.Dropdown(id='template2',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True,
                         style={'minWidth': '90%'})
        ], width=6,className="hstack gap-3"),
    ], className='p-2 align-items-center')

if __name__ == "__main__":
    app.run_server(debug=True)

Alternatively, this applies a smaller minwidth to the dropdown because the container is making the columns start at the center:

import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LUX])
app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H6('Template', style={'text-align': 'left'}),
            dcc.Dropdown(id='template',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True,
                         style={'minWidth': '85%'})
        ], width={'size': 6, "offset": 0, 'order': 1},className="hstack gap-3"),
        dbc.Col([
            html.H6('Template', style={'text-align': 'left'}),
            dcc.Dropdown(id='template2',
                         placeholder="Please select template",
                         options=[{'label': 'ggplot2', 'value': 'ggplot2'},
                                  {'label': 'plotly_white', 'value': 'plotly_white'}],
                         value='ggplot2',
                                multi=True,
                                disabled=False,
                                clearable=True,
                                searchable=True,
                         style={'minWidth': '85%'})
        ], width={'size': 6, "offset": 0, 'order': 1},className="hstack gap-3"),
    ], className='p-2 align-items-center'),
])

if __name__ == "__main__":
    app.run_server(debug=False)
3 Likes
11

Thank for helping me to solve my problem.

1 Like