如何将清单的宽度包装到 Dash Plotly 中父下拉列表的宽度？

Question

我目前在 Dash Bootstrap Components 的下拉菜单中有一个来自 Dash Core Components 的核对清单，我目前遇到了问题，无法让核对清单内部的宽度与它所在的下拉菜单的宽度相同打开时。这是现在的样子：

而我的python组件代码如下：

        html.Div([
            dbc.DropdownMenu([
                dcc.Checklist(
                    id='hand-filter',
                    options=[
                        {'label': 'Left', 'value': 'Left'},
                        {'label': 'Right', 'value': 'Right'},
                        {'label': 'Two-Handed', 'value': 'Both'},
                    ],
                    value=['Left', 'Right', 'Both'],
                    labelStyle={'display': 'block'},
                    inputStyle={"margin-right": "5px"},
                    className='ml-1',
                ),
            ],
                id='hand-dropdown',
                direction="up",
                label="All Options Selected",
                color="info",
                className='mb-1 mw-100',
                toggle_style={'width': '100%'}
                #size='lg'
            ),
        ],),

我已经尝试在 dcc.Checklist 下添加 style={'width': '100%'}，但是没有效果。如果它很重要，使用像素而不是百分比确实可以按如下方式调整清单的宽度 style={'width': '1000px'}。但是，这不会在调整应用程序的 window 大小时将清单的宽度动态调整为下拉列表的宽度。此外，当用户点击距离下拉菜单 space 的地方时，下拉菜单不会自行关闭。

Answer 1

在检查列表中设置 style={'width': '100%'} 不起作用的原因可以在您检查浏览器中呈现的元素时看到。

您设置宽度的元素（id 为 #hand-filter）被另一个 div 包围，class 为 dropdown-menu。因此，当您将 #hand-filter 的宽度设置为 100% 时，它意味着其父级的 100%，即 dropdown-menu div 的宽度，而不是您的下拉菜单组件（ ID #hand-dropdown).

因此，一种解决方案是改为设置 dropdown-menu 元素的宽度

#hand-dropdown div.dropdown-menu {
  width: 100%;
}

另一种方法是使用 vw 而不是 %。

A vh unit is 1% of the layout viewport's height. Similarly, the vw unit is 1% of the layout viewport's width.

https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts#css

如何将清单的宽度包装到 Dash Plotly 中父下拉列表的宽度？

How to wrap a Checklist's width to the width of the parent Dropdown in Dash Plotly?

css

python

plotly-dash

bootstrap-5