两个仪表板控件并排

Question

我对如何在dash中布局控件感到困惑。如何将dropdown和datepicker放在同一行上？

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

Answer 1

我认为您需要的是要并排显示的元素的style选项。在这两个上使用style={'float': 'right','margin': 'auto'}。

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

Answer 2

我想我已经弄清楚了。看起来正确：

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'