Two Dash controls side-by-side

Question

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'
       ),
     ]
    ),

Rudertier · Answer 1 · 2020-05-06T06:53:24.910

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'
   ),
 ]
),

Thank you. I appreciate this. I did attempt this using an alternative method. I used bootstrap components. https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/ — Sade, May 11 '20 at 09:08

score -2 · Answer 2 · answered Feb 13 '18 at 20:00

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'

This seems to depend entirely on the CSS you're using, so this isn't helpful without having that. — jtebert, Jul 31 '18 at 21:19

Two Dash controls side-by-side

2 Answers2