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'
),
]
),
I think I figured it out. It looks correct:
html.Div(
[
dcc.Dropdown(id='dropdown',
options=[{'label': i, 'value': i} for i in all_options],
multi=False,
placeholder='Select Symbol...'
)
],
className='two columns'
),
html.Div(
[
dcc.DatePickerSingle(
id='my-date-picker-single',
month_format='Y-M-D',
min_date_allowed=today - timedelta(days=3),
max_date_allowed=today + timedelta(days=730),
initial_visible_month=today,
date=today),
html.Div(id='output-container-date-picker-single')
],
className='two columns'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.