Getting a button to always be centered above a dropdown menu

Dash Python
1

Hi,

I have a problem which I feel should be relatively simple but I can’t seem to figure it out. I’m trying to get a button to be centrally aligned above

image
image.png1261×556 25.9 KB

I have them in their own html.Div. I was thinking it’s probably changing the horizontalAlign in the style dict but it doesn’t seem to have any effect on it. The only way I seem to get it to move is by putting it its own Div and changing the margin left but that messes up if the page is not full screen.

Any suggestions would be greatly appreciated. Here is my code:

html.Div([
                           html.Button('Refresh', id='refresh_button'),
                           dcc.Dropdown(id='start_date_dropdown',
                                        placeholder='Choose Start Date Override',
                                        style={'width': '220px',
                                               'font-size': '90%',
                                               'height': '40px',
                                               }
                                        )

                       ], style={'margin-left': '550px',
                                 'margin-bottom': '10px',
                                 'verticalAlign': 'middle'}
2

The simplest way:

...
html.Button('Refresh', id='refresh_button',style=dict(width='220px))
...

I highly recommend looking at dash-bootstrap-components https://dash-bootstrap-components.opensource.faculty.ai/l/components/button.

This allows you to do:

import dash_bootstrap_components as dbc
...
dbc.Button('Refresh',id='refresh_button',block=True)
...

which automatically expands the button to the full width of the container.

3

I dont want it to be the same size as the dropdown. I was hoping to keep it the same size but instead of have it be aligned with the left side of the dropdown. I’d like it centered over the dropdown?

I’ll def take a look at the bootstrap components as well

4

Oh, sorry - this is hard when using explicit margins because you have to perfectly balance.

You can use something like:

app.layout = html.Div([
    html.Div([
        html.Button('Refresh', id='refresh_button',
        ),
        dcc.Dropdown(id='start_date_dropdown',
                     placeholder='Choose Start Date Override',
                     style={'font-size': '90%',
                            'height': '40px',
                            }
                     )
    ], style={'margin-bottom': '10px',
              'textAlign':'center',
              'width': '220px',
              'margin':'auto'}
    )
])

where the width is set in the containing Div, the textAlign is 'center', and margin is 'auto' to center them both.

But I highly recommend using the bootstrap layout with auto-centering rows, cols, etc. as defined in dash-bootstrap-components; it takes all the guesswork and explicitness out of making the layouts.

1 Like
5

wow that did the trick perfectly. well done sir.

I’ve not come across bootstrap components before. It looks like they’re just more user friendly versions of the traditional dash components?

6

Kind of - but there is a lot of extended functionality as well and they work beautifully with other dash-bootstrap-components.

I use them almost exclusively.

7

I just tried the dbc for my button but the style wont change to anything but that old windows. Is that just a function of my windows setting/browser?

html.Div([
         dbc.Button('Refresh', id='refresh_button', n_clicks=0, size='sm', 
outline=True, color='primary')

still looks like this:

image
image.png1265×543 30.2 KB

8

Make sure your app includes a reference to the CSS theme:

app = dash.Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP]
)

More docs: https://dash-bootstrap-components.opensource.faculty.ai/

1 Like