How to align dcc dropdown and dbc input

Dash Python
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