Блог

Я довольно новичок в dash и пытаюсь разместить два выпадающих списка рядом друг с другом, но они, похоже, вообще не работают, вместо этого они находятся друг под другом. Я думаю, что я что-то напутал в расположении ‘className’ HTML div. Код выглядит следующим образом:

 app.layout = html.Div([

html.Div( [

    html.H1("Web Application Dashboards with Dash", style={'text-align': 'center'}),

 ] ),

html.Div(
className = "row",children =[
    html.Div(className='six columns', children=[
        dcc.Dropdown(
            id='dropdown_dataset',
                    options=[
                        {'label': 'diabetes', 'value': 'diabetes'},
                        {'label': 'Custom Data', 'value': 'custom'},
                        {'label': 'Linear Curve', 'value': 'linear'},
                    ],
                    value='diabetes',
                    clearable=False,
                    searchable=False,
        )])
    ,html.Div(className='six columns', children=[
        dcc.Dropdown(
        id='dropdown_dataset_2',
        options=[
            {'label': 'sinh', 'value': 'sinh'},
            {'label': 'tanh', 'value': 'cosh'},
        ],
        value='diabetes',[![enter image description here][1]][1]
        clearable=False,
        searchable=False,
    )])
  ])
  ])



  if __name__ == '__main__':
        app.run_server(host='127.0.0.1',port = '5000',debug=False,use_reloader=False)
  

Можете ли вы указать, где я допускаю ошибку, и есть ли какая — либо документация, на которую можно сослаться по этому поводу?

Это сделает это. Я добавил display='flex' в div, который содержит оба выпадающих списка, и установил ширину в 50% для разделов, которые содержат только отдельные выпадающие списки. Вы, конечно, могли бы установить эти стили в своем файле CSS, используя идентификаторы или имена классов, вместо того, чтобы кодировать их встроенным образом, как это.

     html.Div(
        className="row", children=[
            html.Div(className='six columns', children=[
                dcc.Dropdown(
                    id='dropdown_dataset',
                    options=[
                        {'label': 'diabetes', 'value': 'diabetes'},
                        {'label': 'Custom Data', 'value': 'custom'},
                        {'label': 'Linear Curve', 'value': 'linear'},
                    ],
                    value='diabetes',
                    clearable=False,
                    searchable=False,
                )], style=dict(width='50%'))
            , html.Div(className='six columns', children=[
                dcc.Dropdown(
                    id='dropdown_dataset_2',
                    options=[
                        {'label': 'sinh', 'value': 'sinh'},
                        {'label': 'tanh', 'value': 'cosh'},
                    ],
                    value='diabetes',  # [![enter image description here][1]][1]
                    clearable=False,
                    searchable=False,
                )], style=dict(width='50%'))
        ], style=dict(display='flex'))