How to align dcc dropdown and dbc input

Dash Python
1

All,
I am trying to figure out why a dcc dropdown and dbc input component don’t align in my dash app. I have tried several different things, but could not figure out why this happens. Any help/guidance is appreciated. Here is an example code to re-create the issue.

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc

# App Layout
app = dash.Dash(
    __name__,
    meta_tags=[{'name': 'viewport', 'content': 'width=device-width'}],
)
app.title = "Dash App"
server = app.server


PERCENTILES = [x for x in range(0, 100) if x % 5 == 0]
PERCENTILES.append(99)


app.layout = html.Div(
    [
        dbc.Form(
            [
                dbc.FormGroup(
                    [
                        dbc.Label("Percentiles:", className="control_label"),
                        dcc.Dropdown(
                            options=[{'label': str(x), 'value': x} for x in PERCENTILES],
                            multi=True,
                            className="dcc_control",
                            style={'display': 'inline-block', "background-color": "#1f5869",
                                   "color": "#cbe2e2",
                                   "width": "100%"},
                        ),
                    ],
                    style={'display': 'inline-block', "marginLeft": "35px", "marginRight": "35px",
                           "width": "200px", },
                ),
                dbc.FormGroup(
                    [
                        dbc.Label("Height:", className="control_label"),
                        dbc.Input(
                            type="number",
                            placeholder="-18.87",
                            style={"width": "200px", "height": "25px", "color": "#cbe2e2"},
                        ),
                    ],
                    style={'display': 'inline-block', "marginLeft": "35px", "marginRight": "35px"},
                ),
                dbc.FormGroup(
                    [
                        dbc.Label("Age:", className="control_label"),
                        dbc.Input(
                            type="number",
                            placeholder="-18.87",
                            style={"width": "200px", "height": "25px", "color": "#cbe2e2"},
                        ),
                    ],
                    style={'display': 'inline-block', "marginLeft": "35px", "marginRight": "35px"},
                ),
            ]),
    ])


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

image
image1209×295 5.62 KB

2

Hi @UdayGuntupalli

I added ‘float’: ‘left’ to each of the components and this is the result:

image
image1013×215 3.53 KB

I also change the dbc.Label outside the dbc.FormGroup and add it a style. Here is the code:

# App Layout
app = dash.Dash(
    __name__,
    meta_tags=[{'name': 'viewport', 'content': 'width=device-width'}],
)
app.title = "Dash App"
server = app.server


PERCENTILES = [x for x in range(0, 100) if x % 5 == 0]
PERCENTILES.append(99)


app.layout = html.Div(
    [
        dbc.Form(
            [
                dbc.Label("Percentiles:", className="control_label", style={'display': 'block'}),
                dbc.FormGroup(
                    [
                        
                        dcc.Dropdown(
                            options=[{'label': str(x), 'value': x} for x in PERCENTILES],
                            multi=True,
                            className="dcc_control",
                            style={'display': 'inline-block', "background-color": "#1f5869",
                                   "color": "#cbe2e2",
                                   "width": "100%"},
                        ),
                    ],
                    style={'display': 'inline-block', 'float':'left', "marginLeft": "35px", "marginRight": "35px",
                           "width": "200px", },
                ),
                dbc.FormGroup(
                    [
                        dbc.Label("Height:", className="control_label"),
                        dbc.Input(
                            type="number",
                            placeholder="-18.87",
                            style={"width": "200px", "height": "25px", "color": "#cbe2e2"},
                        ),
                    ],
                    style={'display': 'inline-block', 'float':'left', "marginLeft": "35px", "marginRight": "35px"},
                ),
                dbc.FormGroup(
                    [
                        dbc.Label("Age:", className="control_label"),
                        dbc.Input(
                            type="number",
                            placeholder="-18.87",
                            style={"width": "200px", "height": "25px", "color": "#cbe2e2"},
                        ),
                    ],
                    style={'display': 'inline-block', 'float':'left', "marginLeft": "35px", "marginRight": "35px"},
                ),
            ]),
    ])


if __name__ == '__main__':
    app.run_server(debug=True)
1 Like