Dash Plotly中如何让Dropdown内的Checklist宽度适配父容器宽度

宽度适配问题解决方法 #

你给Checklist设置百分比宽度不生效，是因为DropdownMenu的下拉菜单容器默认没有和上层切换按钮保持同宽，需要同时配置两处：

1. 给dbc.DropdownMenu添加menu_style={"width": "100%"}参数，让下拉菜单本身的宽度和切换按钮完全对齐
2. 给dcc.Checklist添加style={"width": "100%"}参数，让Checklist占满下拉菜单的全部可用宽度，可额外添加padding属性避免内容贴边。

点击外部自动关闭问题解决方法 #

这个问题是因为DropdownMenu默认的自动关闭逻辑仅对内置的DropdownMenuItem组件生效，嵌入自定义组件后需要手动配置自动关闭规则，直接给dbc.DropdownMenu添加autoclose="outside"参数即可，配置后只要点击菜单外的任意区域，菜单就会自动收起。

修改后完整代码 #

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',
            style={'width': '100%', 'padding': '0.5rem 0'}
        ),
    ],
        id='hand-dropdown',
        direction="up",
        label="All Options Selected",
        color="info",
        className='mb-1 mw-100',
        toggle_style={'width': '100%'},
        menu_style={'width': '100%'},
        autoclose="outside"
    ),
],),

内容的提问来源于stack exchange，提问作者Terrence Pane