Align the dash app layout input box with drop down and dates

Question

I am trying to create a layout using the DASH app, and I am not sure why it's not working when I am trying to set the input boxes with a drop-down.

here is my layout:

tab_1_layout = html.Div([
dcc.Input(id="ad_account_id", type="text", placeholder="Account ID", style={'width': '200px',
                                                                            'margin-top': 10,
                                                                            'margin-left': 20,

                                                                            }),
# html.Br(),
dcc.Input(id="app_id", type="text", placeholder="App ID", style={'width': '200px',
                                                                 'margin-left': 20,
                                                                 'display': 'inline-block'
                                                                 }),
# html.Br(),
dcc.Input(id="access_token", type="text", placeholder="Access Token", style={'width': '200px',
                                                                             'margin-left': 20,
                                                                             'display': 'inline-block'
                                                                             }),
# html.Br(),
dcc.Input(id="app_secret", type="text", placeholder="App Secret", style={'width': '200px',
                                                                         'margin-left': 20,
                                                                         }),

# html.Br(),
dcc.Dropdown(
    id='dimensions',
    options=[{'label': i, 'value': i} for i in ['Campaign', 'Placement', 'Creative']],
    multi=True,
    placeholder='Dimensions',
    style={'width': '200px', 'margin-left': 150, 'margin-top': 20, 'display':'inline-block'}
),
# html.Br(),
dcc.Dropdown(
    id='metrics',
    options=[{'label': i, 'value': i} for i in ['Impressions', 'Clicks', 'Conversions']],
    multi=True,
    placeholder='Metrics',
    style={'width': '200px', 'margin-left': 400}
),
html.Br(),
dcc.DatePickerSingle(
    id='start-date',
    placeholder="Start Date",
    min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
    max_date_allowed=datetime.datetime.today().date(),
    display_format='YYYY-MM-DD',
    style={'width': '200px', 'margin-top': 10, 'margin-left': 400}
),
# html.Br(),
dcc.DatePickerSingle(
    id='end-date',
    placeholder="End Date",
    min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
    max_date_allowed=datetime.datetime.today().date(),
    display_format='YYYY-MM-DD',
    style={'width': '200px', 'margin-top': 10, 'margin-left': 220}
),
html.Br(),
html.Button(id='submit-button', type='submit', children='Submit', style={'width': '200px', 'margin-top': 10,
                                                                         'margin-left': 10}),
html.Div(id='output_div')]),

its shwoing the UI like below but i want to align dimension and metrics with first row and then on second row align start date and end date and third row will be submit.

Answer 1

There are a number of ways to achieve this but personally I like Dash Bootstrap layout. Below is your code refactored to use bootstrap rows and columns to achieve what you want. Bootstrap layout

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

import numpy as np

app = dash.Dash(external_stylesheets = [dbc.themes.BOOTSTRAP])
app.title = "Steepest Descent"

server = app.server

row1 = html.Div(
    [
        dbc.Row([
            dbc.Col([
                dbc.Input(id="ad_account_id", 
                          type="text", 
                          placeholder="Account ID",
                          style={'width': '150px'}),
            ], width={"order": "first"}),

            dbc.Col([
                dbc.Input(id="app_id", 
                          type="text", 
                          placeholder="App ID",
                          style={'width': '150px'}),
            ]),
            dbc.Col([
                dbc.Input(id="access_token", 
                          type="text",
                          style={'width': '150px'},
                          placeholder="Access Token")
            ]),
            dbc.Col([
                dbc.Input(id="app_secret", 
                          type="text", 
                          style={'width': '150px'},
                          placeholder="App Secret")
            ]),

            dbc.Col([
                dcc.Dropdown(
                    id='dimensions',
                    options=[{'label': i, 'value': i} for i in ['Campaign', 'Placement', 'Creative']],
                    multi=True,
                    style={'width': '150px'},
                    placeholder='Dimensions')
            ]),
            dbc.Col([
                dcc.Dropdown(
                    id='metrics',
                    options=[{'label': i, 'value': i} for i in ['Impressions', 'Clicks', 'Conversions']],
                    multi=True,
                    style={'width': '150px'},
                    placeholder='Metrics')
            ])
        ], align="center"),
    ]
)

row2 = html.Div([
     dbc.Row([
         dbc.Col([
            dcc.DatePickerSingle(
                id='start-date',
                placeholder="Start Date",
                min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
                max_date_allowed=datetime.datetime.today().date(),
                display_format='YYYY-MM-DD',
                style={'width': '150px'}
            ),
        ], width={"order": "first"}),
        dbc.Col([
            # html.Br(),
            dcc.DatePickerSingle(
                id='end-date',
                placeholder="End Date",
                min_date_allowed=datetime.datetime.now().strftime('2018-01-01'),
                max_date_allowed=datetime.datetime.today().date(),
                display_format='YYYY-MM-DD',
                style={'width': '150px'}
            )], align="center"),
        ])
     ])

row3 = html.Div([
    dbc.Row([
         dbc.Col([
             html.Button(id='submit-button', type='submit', children='Submit', style={'width': '200px', 'margin-top': 10,
                                                                                                 'margin-left': 10}),

             ], width={"order": "first"}),
         dbc.Col([
             html.Div(id='output_div'),
             ])
         ])
    ])

app.layout = dbc.Container(children=[
                               row1,
                               html.Br(),
                               row2,
                               html.Br(),
                               row3]
                           )

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