Hi,
I have the following simplified layout and my target is to have all the elements of the first Div vertically aligned.
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
html.H1('Evolution of World'),
html.Div([
html.Div([
html.Div(children='Select'),
dcc.Dropdown(
id='drop_world',
options={'label': 'America', 'value': 'America'},
multi=True,
value=''
)
], style={'display': 'inline-block', 'width': '20%', 'border': '2px green solid'}),
html.Div([
html.Div(children='Select'),
dcc.Dropdown(
id='drop_area',
options={'label': 'US', 'value': 'US'}, # List of {'label': , 'value': }
multi=True,
value=''
)
], style={'display': 'inline-block', 'width': '20%', 'margin-left': '15px', 'border': '2px green solid'}),
html.Div([
html.Div(children='Select Start and End Date'),
dcc.DatePickerRange(
id='date-picker-range',
display_format='DD/MM/YY',
first_day_of_week=1,
)
], style={'display': 'inline-block', 'width': '20%', 'margin-left': '15px', 'border': '2px green solid'}),
html.Div([
html.Div(children='See'),
html.Button('See Button', id='but-see', n_clicks=0, style={'verticalAlign': 'middle'}),
], style={'display': 'inline-block', 'margin-left': '15px', 'verticalAlign': 'middle', 'border': '2px green solid'}),
]),
html.P(),
html.Div([
html.Div(children='Results'),
dcc.Graph(id='my_graph',
figure={'data': [{'x': [1, 2], 'y': [3, 1]}],
'layout': {'title': 'Default Title'}
})
])
])
if __name__ == '__main__':
app.run_server()
However, the datepickerrange and the button are a bit higher: