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

Question

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

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

两行的第一列是标签，不应包含在滚动区中。
每行20个条目被挤得很窄，x-scrollbar几乎不滚动。每个条目的宽度应足以显示 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)

Answer 1

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

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

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

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)

看起来像这样：

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

How to add x-scrollbar to a part of dbc.Card, dash, Python3?

python-3.x

dash-bootstrap-components