How to style a button in plotly dash to look clean and more aligned with other components

user_10655190 0
Viewed 2724

How do I move my button "Show table" so it aligns well with my filters? As you can see this is not appealing at all. It should rise a bit. What css style method can I use? How can i add shadow and have a more clean look.

Extra: (I never used css) is there some type of website that I may test different css functions to see the impact?

enter image description here

html.Div([
    html.Div([
        dcc.Dropdown(
            id='sim-filter',
            style={'font-size': '12px', 'width': '90px', 'display': 'inline-block', 'margin-right': '5px'}
        ),
        dcc.Dropdown(
            id='event-filter',
            style={'font-size': '12px', 'width': '240px', 'display': 'inline-block', 'margin-right': '5px'}
        ),
        dcc.Dropdown(
            id='time-filter',
            style={'font-size': '12px', 'width': '180px', 'display': 'inline-block', 'margin-right': '5px'}
        ),
        html.Button(id='my-button', n_clicks=0, children="Show table",
                    style={'font-size': '12px', 'width': '140px', 'display': 'inline-block', 'margin-bottom': '10px', 'margin-right': '5px', 'height':'25px'})
    ])
plotly-dash css html python
1 Answers

You can try changing verticalAlign in style.

For example, you add 'height':'37px', 'verticalAlign': 'top' to the button's style:

style={'font-size': '12px', 'width': '140px', 'display': 'inline-block', 'margin-bottom': '10px', 'margin-right': '5px', 'height':'37px', 'verticalAlign': 'top'}
user_79657890
Related