Arranging elements horizontally in a dash application

Question

I'm trying to develop a Dash application in python. I tried adding style={'display': 'inline-block'} to the html.Div() component, as well as to other components, but couldn't set the drop-down menus to align in one row.

The page looks as follows:

with the inline styling: Without the inline styling:

The code in the question was given to me as a template that needs to be filled properly. The complex hierarchy was part of the template. My job is to add code as needed. I'm adding only the problematic part of the code (without the title and the graph elements that are seen in the images):

df = pd.read_csv("dash\Pricing Data.csv")
colors = {
'background': '#111111',
'text': '#7FDBFF'
}

boxplot_layout = (
    dbc.Container(
        [dbc.Row(
                [
                    dbc.Col(
                        [
                            dbc.Card(
                                [
                                    dbc.CardBody(
                                        [
                                            dbc.Row(
                                                [
                                                    dbc.Col(
                                                        html.Div(
                                                            dbc.Row(
                                                                [
                                                                    dbc.Col(
                                                                        [
                                                                            dcc.Dropdown(
                                                                                id="aggregate-dropdown",
                                                                                options=[
                                                                                    {
                                                                                        "label": "Total",
                                                                                        "value": "sum",
                                                                                    },
                                                                                    {
                                                                                        "label": "Average",
                                                                                        "value": "average",
                                                                                    },
                                                                                ],
                                                                                value="sum",
                                                                                style={
                                                                                    'textAlign': 'center',
                                                                                    # 'color': colors['text']
                                                                                },
                                                                            )
                                                                        ],
                                                                    ),
                                                                    dbc.Col(
                                                                        [
                                                                            dcc.Dropdown(
                                                                                id="y-dropdown",
                                                                                options=[
                                                                                    {'label': i, 'value': i}
                                                                                    for i in df.columns],
                                                                                style={
                                                                                    'textAlign': 'center',
                                                                                },
                                                                                value='Age'
                                                                            )
                                                                        ],
                                                                    ),
                                                                    dbc.Col(
                                                                        [
                                                                            html.Label(
                                                                                "by",
                                                                                style={
                                                                                    'textAlign': 'center',
                                                                                    # 'color': colors['text']
                                                                                }
                                                                            )
                                                                        ],
                                                                    ),
                                                                    dbc.Col(
                                                                        [
                                                                            dcc.Dropdown(
                                                                                id="x-dropdown",
                                                                                options=[
                                                                                    {'label': i, 'value': i}
                                                                                    for i in df.columns],
                                                                                style={
                                                                                    'textAlign': 'center',
                                                                                    'padding': '3px ',
                                                                                },
                                                                                value='Age'
                                                                            )],),],)))],),])],inverse=True,)])])]))


app.layout = boxplot_layout

if __name__ == "__main__":
    app.run_server(debug=True)

Also, as can be seen in the images, there's an error message. I couldn't find solutions for this error, so if you have any ideas regarding its cause or how to find it I'll be grateful if you could post it too.

Thanks.

Answer 1

What I did eventually was to change the style inside the Column components of the Drop-down menus, as well as the style of the Drop-down themselves. I used the tags 'padding' and 'width' and changed their values until it looked OK. I also used the value 'inline-block' for the 'display' tag.

For instance, here's the code for one of the drop-down menus and it's column:

dbc.Col(
    [
        dcc.Dropdown(
            id="y-axis-dropdown",
            options=
            [{'label': i, 'value': i} for i in df.columns],
            value='Age',
            style={'textAlign': 'center'}
        )
    ], style={
             'display': 'inline-block',
             'width': '25%',
             'padding': 30,
             'textAlign': 'center'
       }

)