在破折号应用程序中水平排列元素

Question

我正在尝试在 python 中开发 Dash 应用程序。我尝试将 style={'display': 'inline-block'} 添加到 html.Div() 组件以及其他组件，但无法将 drop-down 菜单设置为在一行中对齐。

页面如下：

使用内联样式：没有内联样式：

问题中的代码是作为模板提供给我的，需要正确填写。复杂的层次结构是模板的一部分。我的工作是根据需要添加代码。我只添加了代码中有问题的部分（没有图像中看到的标题和图形元素）：

df = pd.read_csv("dash\Pricing Data.csv")
colors = {
'background': '#111111',
'text': '#7FDBFF'
}

boxplot_layout = (
    dbc.Container(
        [dbc.Row(
                [
                    dbc.Col(
                        [
                            dbc.Card(
                                [
                                    dbc.CardBody(
                                        [
                                            dbc.Row(
                                                [
                                                    dbc.Col(
                                                        html.Div(
                                                            dbc.Row(
                                                                [
                                                                    dbc.Col(
                                                                        [
                                                                            dcc.Dropdown(
                                                                                id="aggregate-dropdown",
                                                                                options=[
                                                                                    {
                                                                                        "label": "Total",
                                                                                        "value": "sum",
                                                                                    },
                                                                                    {
                                                                                        "label": "Average",
                                                                                        "value": "average",
                                                                                    },
                                                                                ],
                                                                                value="sum",
                                                                                style={
                                                                                    'textAlign': 'center',
                                                                                    # 'color': colors['text']
                                                                                },
                                                                            )
                                                                        ],
                                                                    ),
                                                                    dbc.Col(
                                                                        [
                                                                            dcc.Dropdown(
                                                                                id="y-dropdown",
                                                                                options=[
                                                                                    {'label': i, 'value': i}
                                                                                    for i in df.columns],
                                                                                style={
                                                                                    'textAlign': 'center',
                                                                                },
                                                                                value='Age'
                                                                            )
                                                                        ],
                                                                    ),
                                                                    dbc.Col(
                                                                        [
                                                                            html.Label(
                                                                                "by",
                                                                                style={
                                                                                    'textAlign': 'center',
                                                                                    # 'color': colors['text']
                                                                                }
                                                                            )
                                                                        ],
                                                                    ),
                                                                    dbc.Col(
                                                                        [
                                                                            dcc.Dropdown(
                                                                                id="x-dropdown",
                                                                                options=[
                                                                                    {'label': i, 'value': i}
                                                                                    for i in df.columns],
                                                                                style={
                                                                                    'textAlign': 'center',
                                                                                    'padding': '3px ',
                                                                                },
                                                                                value='Age'
                                                                            )],),],)))],),])],inverse=True,)])])]))


app.layout = boxplot_layout

if __name__ == "__main__":
    app.run_server(debug=True)

另外，如图所示，有一条错误消息。我找不到此错误的解决方案，所以如果您对它的原因或如何找到它有任何想法，我将不胜感激 post。

谢谢。

Answer 1

关注文档 example:

dbc.Row(
        [
            dbc.Col(html.Div("One of three columns")),
            dbc.Col(html.Div("One of three columns")),
            dbc.Col(html.Div("One of three columns")),
        ]
    ),

它会得到你想要的东西。所以，这就是基本结构，删除了不必要的代码，如下：

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import pandas as pd

df = pd.read_csv()
colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
    dbc.Container([
        dbc.Row([
            dbc.Col(
                html.Div([
                    dcc.Dropdown(
                        id="aggregate-dropdown",
                        options=[
                            {
                                "label": "Total",
                                "value": "sum",
                            },
                            {
                                "label": "Average",
                                "value": "average",
                            },
                        ],
                        value="sum",
                        style={
                            'textAlign': 'center',
                            # 'color': colors['text']
                        },
                    )
                ]), width=3
            ),
            dbc.Col(
                html.Div([
                    dcc.Dropdown(
                        id="y-dropdown",
                        options=[
                            {'label': i, 'value': i}
                            for i in df.columns],
                        style={
                            'textAlign': 'center',
                        },
                        value='Age'
                    )
                ]), width=3
            ),
            dbc.Col(
                html.Div([
                    html.Label(
                        "by",
                        style={
                            'textAlign': 'center',
                            # 'color': colors['text']
                        }
                    )
                ]), width=1
            ),
            dbc.Col(
                html.Div([
                    dcc.Dropdown(
                        id="x-dropdown",
                        options=[
                            {'label': i, 'value': i}
                            for i in df.columns],
                        style={
                            'textAlign': 'center',
                        },
                        value='Age'
                    )
                ]), width=3
            ),
        ])
    ])
])

if __name__ == "__main__":
    app.run_server(debug=True)

注意我传递了一个 'width=' 关键字参数来设置列的大小。

这就是结果：

result

希望它能帮助您找到组织代码的更好方法。

Answer 2

我最终所做的是更改下拉菜单的列组件内的样式，以及下拉菜单本身的样式。我使用了标签 'padding' 和 'width' 并更改了它们的值，直到看起来不错。我还为 'display' 标签使用了值 'inline-block'。

例如，这是其中一个下拉菜单及其列的代码：

dbc.Col(
    [
        dcc.Dropdown(
            id="y-axis-dropdown",
            options=
            [{'label': i, 'value': i} for i in df.columns],
            value='Age',
            style={'textAlign': 'center'}
        )
    ], style={
             'display': 'inline-block',
             'width': '25%',
             'padding': 30,
             'textAlign': 'center'
       }

)

在破折号应用程序中水平排列元素

Arranging elements horizontally in a dash application

python

dashboard

plotly-dash

plotly-python