Skip to content
Advertisement

Heights of dropdown and button are different. Dash Plotly python

I am trying to make a dashboard with dash in python and I am trying to align 2 dropdowns and a button horizontally

this is the html.Div that I am working with

html.Div([
    html.Div(
        dcc.Dropdown(
            id='dropdown 1',
            options=list(df_.columns),
            multi=True,
            clearable=True,
            searchable=True,
            placeholder='Required Rows',
            optionHeight=20,
        ), style={
            'width': '39%',
            'display': 'inline-block',
            'vertical-align': 'top',
        }
    ),

    html.Div(
        dcc.Dropdown(
            id='dropdown 2',
            options=list(df_.columns),
            multi=True,
            clearable=True,
            searchable=True,
            placeholder='Required Columns',
            optionHeight=20,
        ), style={
            'width': '39%',
            'display': 'inline-block',
            'vertical-align': 'top',
        }
    ),

    html.Div(
        html.Button(
            "Do something",
            id='button_1',
        ), style={
            'width': '20%',
            'display': 'inline-block',
            'vertical-align': 'top'
        }
    )

]),

enter image description here

Is there any way to make the height of the do something button the same as that of the dropdown even when the window is resizing.

Or

Is there any way to make the height of dropdowns same as that of the button, which stays the same even when resizing?

Thank you

Advertisement

Answer

You can set the elements to the same line-height.

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement