如何将 x-scrollbar 添加到 dbc.Card、dash、Python3 的一部分？

Posted 2023-03-21

【中文标题】如何将 x-scrollbar 添加到 dbc.Card、dash、Python3 的一部分？

【英文标题】：How to add x-scrollbar to a part of dbc.Card, dash, Python3?

【发布时间】：2021-12-30 13:39:50

【问题描述】：

我想创建 2 行条目。每一行的左侧都有一个标签，后面跟着最多 20 个条目。我正在使用dbc.Container 来保存布局。在容器中，我有几个 dbc.Cards。为简单起见，我只使用了一张卡。在这张卡片中，我放置了 2 行组件。

使用下面给出的代码，上面的屏幕截图显示了结果。有两件事不是我想要的。

两行中的第一列是标签，不应包含在滚动区域中。 每行中的 20 个条目被压缩到非常窄，并且 x 滚动条几乎不滚动。每个条目的宽度应足以显示 6 位数字，例如 123.123。

你能告诉我怎么做吗？谢谢

import dash
from dash import html
import dash_bootstrap_components as dbc

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

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                html.H4('Card Header'),
                dbc.Row([
                    dbc.Col([
                        dbc.Label('Row 1'),
                    ]),
                    *[
                        dbc.Col([dbc.Input(placeholder='123.123')]) for _ in range(20)
                    ]
                ]),
                dbc.Row([
                    dbc.Col([
                        dbc.Label('Row 2'),
                    ]),
                    *[
                        dbc.Col([dbc.Input(placeholder='123.123')]) for _ in range(20)
                    ]
                ])
            ], style='overflow-x': 'scroll')
        ])
    ])
])


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

【参考方案1】：

您的第二个问题很简单，只需将style="width":"120px" 添加到您的输入或任何适合您需要的值。

第一个问题有点棘手，我认为没有合适的 Dash 解决方案。

您可以将标签移出滚动区域。请参阅下面的我的建议。您可能需要调整行高以对齐标签和数据行。不过应该是可以的。

import dash
from dash import html
import dash_bootstrap_components as dbc

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

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            dbc.Container([
                dbc.Label('Row 1'),
                dbc.Label('Row 2'),
            ], style=
                "display": "flex",
                "flexDirection": "column",
                "alignItems": "flex-end",
                "justifyContent": "flex-end"
                ),
            dbc.Card([
                html.H4('Card Header'),
                dbc.Row([
                    *[
                        dbc.Col([dbc.Input(placeholder='123.123', style="width":"120px")]) for _ in range(20)
                    ]
                ], style="flexWrap":"nowrap"),
                dbc.Row([
                    *[
                        dbc.Col([dbc.Input(placeholder='123.123', style="width":"120px")]) for _ in range(20)
                    ]
                ], style="flexWrap":"nowrap")
            ], style='overflowX': 'scroll')
        ], style="display": "flex")
    ])
])


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

看起来像这样：

【讨论】：

感谢您的有用回答。效果很好！