Center dropdown menu

Dash Python
1

I am trying to center dropdown menus, however, they are always left-bound. I tried adding html.Center(), several style options but nothing helped so far. How can I have my Dropdown menues displayed in the middle of the screen instead of floated to the left-hand side?

layout = html.Div([

    dcc.Markdown('---'),

    html.H2('Explorer'),

    dbc.Row([

        dbc.Col([

            html.Div([

                dcc.Dropdown(id='explorer-x', multi=False, options=list_to_dropdown_options(all_columns), placeholder='X-axis', value=None),

                dcc.Dropdown(id='explorer-y', multi=False, options=list_to_dropdown_options(all_columns), placeholder='Y-axis', value=None),

                dcc.Dropdown(id='explorer-color', multi=False, options=list_to_dropdown_options(all_columns), placeholder='Color', value=None),

                dcc.Dropdown(id='explorer-size', multi=False, options=list_to_dropdown_options(all_columns), placeholder='Marker size', value=None),

                dcc.Dropdown(id='explorer-facet-row', multi=False, options=list_to_dropdown_options(all_columns), placeholder='Facet row', value=None),    

                dcc.Dropdown(id='explorer-facet-col', multi=False, options=list_to_dropdown_options(all_columns), placeholder='facet column', value=None),

            ], style={'padding-top': 100, 'margin': 'auto'}, className='center'),

        ], style={'width': 300, 'min-width': 300, 'max-width': 300}),

        dbc.Col([

            dcc.Loading([ 

                html.Div(style={'min-width': 300}),

                dcc.Graph(id="explorer-figure", style={'max-width': '100%'}),  

            ]),

        ])

    ])

])
2

Is this the layout that you’re looking for?

Screen Shot 2020-11-20 at 2.39.40 PM
Screen Shot 2020-11-20 at 2.39.40 PM2832×1322 116 KB

To center elements within a parent div you just need to center content in the parent and apply margin: auto to each child element:

            html.Div([

                dcc.Dropdown(id='explorer-x', multi=False,placeholder='X-axis', value=None, style={'margin':'auto', 'width':'50%'}),

                dcc.Dropdown(id='explorer-y', multi=False, placeholder='Y-axis', value=None, style={'margin':'auto', 'width':'50%'}),

                dcc.Dropdown(id='explorer-color', multi=False, placeholder='Color', value=None, style={'margin':'auto', 'width':'50%'}),

                dcc.Dropdown(id='explorer-size', multi=False, placeholder='Marker size', value=None, style={'margin':'auto', 'width':'50%'}),

                dcc.Dropdown(id='explorer-facet-row', multi=False,  placeholder='Facet row', value=None, style={'margin':'auto', 'width':'50%'}),    

                dcc.Dropdown(id='explorer-facet-col', multi=False, placeholder='facet column', value=None, style={'margin':'auto', 'width':'50%'}),

            ], style={'padding-top': 100,}, className='justify-content-center'),
1 Like
3

Exactly, thank you. Where is that justify-content-center coming from? Is that materialize standard or is it specific to plotly?