Layout and Dropdown menu in Dash - Python

Question

I cannot seem to be able to get the layout of my dropdown menu boxes correctly. Basically I want for the dropdown box to be on the right of their matching question and on the same line.

Can anyone help please?

I have tried multiple combinations of style={'display': 'inline-block', 'width:'X%'} and className = 'X columns' with no luck.

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import dash_auth

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
html.Div(
            [   
                html.Div(
                    [
                        html.H6("""Select your current industry""", 
                        style={'textAlign': 'right', 'font-weight':'bold', 'margin-left': '0em', 'margin-right': '2em', 'display': 'inline-block', 'width': '40%'})
                    ],      
                    ),

                dcc.Dropdown(
                            id = 'business_area_dropdown',
                            options=[
                                {'label': 'Academia', 'value': 'academia'},
                                {'label': 'Energy', 'value': 'energy'},
                                {'label': 'Research', 'value': 'research'}
                            ],
                            placeholder="Select Business Area",
                            style = dict(
                            width = '40%',
                            display = 'inline-block',
                            verticalAlign = "middle"
                            )
                        )

            ],
            className='row'
        ),

    html.Div(
            [   
                html.Div(
                    [
                        html.H6("""Are you happy where you are?""", 
                        style={'textAlign': 'right', 'font-weight':'bold', 'margin-left': '0em', 'margin-right': '2em', 'display': 'inline-block', 'width': '40%'})
                    ],      
                    ),

                dcc.Dropdown(
                            id = 'search_preference',
                            options=[
                                {'label': 'Yes', 'value': 'yes'},
                                {'label': 'No', 'value': 'no'}
                            ],
                            placeholder="Select Answer",
                            style = dict(
                            width = '40%',
                            display = 'inline-block',
                            verticalAlign = "middle"
                            )
                        )

            ],
            className='row'
        ),],

    style={'display': 'inline-block', 'backgroundColor': '#fff7dd', 'width': '99%'}

    )


if __name__ == '__main__':
    app.run_server()

The dropdown boxes appear in a completely different line. I'd like for the dropdown boxes to be aligned horizontally to their respective questions to be answered.

Solution

My favorite styling trick, Flexbox, is how I would solve this one.

app.layout = html.Div([
    html.Div(
        [
            html.Div(
                [
                    html.H6("""Select your current industry""",
                            style={'margin-right': '2em'})
                ],
            ),

            dcc.Dropdown(
                id='business_area_dropdown',
                options=[
                    {'label': 'Academia', 'value': 'academia'},
                    {'label': 'Energy', 'value': 'energy'},
                    {'label': 'Research', 'value': 'research'}
                ],
                placeholder="Select Business Area",
                style=dict(
                    width='40%',
                    verticalAlign="middle"
                )
            )
        ],
        style=dict(display='flex')
    ),

    html.Div(
        [
            html.Div(
                [
                    html.H6("""Are you happy where you are?""",
                            style={'margin-right': '2em'})
                ],
            ),

            dcc.Dropdown(
                id='search_preference',
                options=[
                    {'label': 'Yes', 'value': 'yes'},
                    {'label': 'No', 'value': 'no'}
                ],
                placeholder="Select Answer",
                style=dict(
                    width='40%',
                    display='inline-block',
                    verticalAlign="middle"
                )
            )

        ],
        style=dict(display='flex')
    ), ],
)

And here is a screenshot of the results:

Comments

[Christian Ivaha]

Thanks, that's great! Sorry for the late reply!

[Cody Mayers]

Is there a way to implement this while keeping the left edges of all the dropdown boxes in vertical alignment?

[coralvanda]

Yes. The first way that comes to mind would be to set the width for the divs containing the H6 elements to the same, fixed width.