Dropdowns are not in one row with display : inline-block

Dash Python
1

Hello community,

at the moment I have some problems with displaying the dropdowns as I want.

That’s how the dropdowns looks like:

currentDropdowns

and thats the code:

dcc.Dropdown(
id=“year_picker1”,
options=[{“label”: x, “value”: x} for x in sortiertJahr],
value=dff[‘Jahr’].min(),
clearable=False,
style={‘width’ : ‘150px’, ‘display’: ‘inline-block’, ‘margin-left’ : ‘2.3%’},
persistence=True,
persistence_type=“session”
), dcc.Dropdown(
id=“filial_picker1”,
options=filial_picker_options,
value=‘Alle’,
clearable=False,
style={‘width’ : ‘220px’, ‘display’: ‘inline-block’, ‘margin-left’ : ‘0.3%’},
persistence=True,
persistence_type=“session”
), dcc.Dropdown(
id=“monat_week_picker1”,
options=[{‘label’ : ‘Kalenderwochen’, ‘value’ : ‘Woche’},
{‘label’ : ‘Monat’, ‘value’ : ‘Monat’}],
value=‘Woche’,
clearable=False,
style={‘width’ : ‘200px’, ‘display’: ‘inline-block’, ‘margin-left’ : ‘0.3%’},
persistence=True,
persistence_type=“session”

), dcc.Dropdown(
    id="year_calc_picker_21",
    options=[{"label": x, "value": x} for x in sortiertJahr],
    value=2019,
    clearable=False,
    style={'width' : '150px', 'display': 'inline-block', 'margin-left' : '2.3%'},
    persistence=True,
    persistence_type="session"
    )

and the layout:

layout = html.Div(
[
html.P(“Optik”),
dcc.Graph(id=‘bar’),
html.Div(id=“year_picker”, children=),
html.Div(id=“filial_picker”, children=),
html.Div(id=“monat_week_picker”, children=),
html.Div(id=“year_calc_picker_2”, children=)

]

)

and thats how they should be displayed:

asIwant

And thats the same code im using:

the only difference is the layout:

layout = html.Div([
dcc.Graph(id=‘nursing_titles’),

dcc.Dropdown(id='year_picker', options=[{'label': str(i), 'value' : i} for i in sorted_year['Jahr'].unique()],
             value=d['Jahr'].min(),
             style = {'width' : '150px', 'display': 'inline-block', 'margin-left' : '2.3%'}),

dcc.Dropdown(id='filial_picker',
             options=filial_picker_options,
             value = 'Alle',
             style = {'width' : '220px', 'display': 'inline-block', 'margin-left' : '0.3%'}),
dcc.Dropdown(id='monat_week_picker',
             options=[{'label' : 'Kalenderwochen', 'value' : 'Woche'},
                      {'label' : 'Monat', 'value' : 'Monat'}],
             value = 'Woche',
             style = {'width' : '200px', 'display': 'inline-block', 'margin-left' : '0.3%'}),
html.Br(),
html.Br(),

]
)

2

put them inside an object like a div, or cardbody, and use flexwrap like this

        dbc.CardBody([
            html.Label([
                "something",
                html.Br(),
                dcc.Dropdown(
                ),    
            ]),
            html.Label([
                "Start Date",
                html.Br(),
                dcc.DatePickerSingle(
                ),
            ]),
            html.Label([
                "something 2",
                html.Br(),
                dcc.Dropdown(
                ),    
            ]),

        ], style={"display": "flex", "flexWrap": "wrap"}),
1 Like
3

I will try it today.

Thank you @ harrygateaux

4

Thank you very much. It’s working

1 Like