How to have html.Div childrens in one line?

Dash Python
1

Here is the simple html.Div but I want to have children list objects in one line

html.Div(
        children=[
                    dcc.Dropdown(
                                id="xaxis-column",
                                options=[{'label': col, 'value': col} for col in features[2:]],
                                value="ABS"                        
                    ),
                    dcc.Input(id1, type="number"),
                    dcc.Input(id2, type="number"),            
        ]
    )

Any help will be appreciated. Thank you!

2

The simple answer would be to add style={"display": "inline"} in the div…

A better way of doing would be with flexbox or the bootstrap grid, depending on how you want responsiveness to work in your page. Please take a look on the dash-bootstrap-components docs on Layout to see how the grid is implemented.

3

Thanks @jlfsjunior ! I did not know about the bootstrap components. But I used style = {"display":"inline-flex"} and it worked just fine.

1 Like