I am confused as to how to layout controls in dash
. How do I put the dropdown
and the datepicker
on the same row side-by-side?
html.Div(
[
html.Div(
[
dcc.Dropdown(id='dropdown',
options=[{'label': i, 'value': i} for i in all_options],
multi=False,
placeholder='Select Symbol...',
),
dcc.DatePickerSingle(
id='my-date-picker-single',
min_date_allowed=today,
max_date_allowed=today,
initial_visible_month=today,
date=today)
],
className='row'
),
]
),
I think what you need is the style
option of the elements you want to display side-by-side. Using style={'float': 'right','margin': 'auto'}
on both of them.
html.Div(
[
html.Div(
[
dcc.Dropdown(id='dropdown',
options=[{'label': i, 'value': i} for i in all_options],
multi=False,
placeholder='Select Symbol...',
style={'float': 'right','margin': 'auto'}
),
dcc.DatePickerSingle(id='my-date-picker-single',
min_date_allowed=today,
max_date_allowed=today,
initial_visible_month=today,
date=today
style={'float': 'right','margin': 'auto'}
)
],
className='row'
),
]
),