Component Layout, inline

Dash Python
1

Hi I’m trying to create one line with 5 components, unfortunately I don’t understand the way to do it.
I tried the following after reading other topics here, and seeing some examples:

comp = html.Div(
    className="row",
    children=[
        # html.H3('Source for Analysis'),
        html.Div(
            className='five columns',
            children=[
                html.H3('Add Local source:')
            ]
        ),
        html.Div(
            className='five columns',
            children=[
                dcc.Dropdown(
                    options=[],
                    value='',
                    id='1'
                )
            ]
        ),
        html.Div(
            className='five columns',
            children=[
                dcc.Dropdown(
                    options=[],
                    value='',
                    id='2')
            ]
        ),
        html.Div(
            className='five columns',
            children=[
                dcc.Dropdown(
                    options=[],
                    value='',
                    id='3')
            ]
        ),
        html.Div(
            className='five columns',
            children=[
                html.Button('ADD', id='ADD_cond', n_clicks_timestamp=0)
            ]
        ),
        ]
)

I get the following:

image
image.png1611×132 5.25 KB

can someone suggest a solution or\and a good source for understanding how the layout works?
thanks

2

You can see the Sample Dash CSS Stylesheet (https://codepen.io/chriddyp/pen/bWLwgP.css).
The grid is a 12-column grid, so you need to keep the sum of columns under 12 if you need them to be in one line. In your code, you have className='five columns' for 5 components, so it won’t be in a row since 5*5>12.

1 Like
3

You could check out dash-bootstrap-components if you like. It has some nice layout components that hopefully make this sort of thing easier.

Based on your example I came up with the following app:

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

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
    
app.layout = html.Div(
    dbc.Row(
        [
            dbc.Col(children=html.H3("Add Local source:"), width="auto"),
            dbc.Col(children=dcc.Dropdown(options=[], value="", id="1")),
            dbc.Col(children=dcc.Dropdown(options=[], value="", id="2")),
            dbc.Col(children=dcc.Dropdown(options=[], value="", id="3")),
            dbc.Col(
                children=dbc.Button(
                    "ADD", id="ADD_cond", n_clicks_timestamp=0
                ),
                width="auto",
            ),
        ]
    ),
    style={"padding": "20px"},
)
    
if __name__ == "__main__":
    app.run_server()

which looks like this:

image
image.png2864×346 15.3 KB

The width="auto" in the columns containing the header and the button means those columns size themselves to fit their children. The remaining columns expand equally to fill the remaining space. If you want 5 equally sized columns, just get rid of the width="auto" in those two columns.

2 Likes
4

thanks! This solves it
I still didn’t understood the CSS column grid mechanism though