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

Question

I currently have a checklist from Dash Core Components inside a dropdown menu from Dash Bootstrap Components and I am currently having issues to get the width of the checklist inside to be the same width of the dropdown it's in when opened. Here's how it looks right now:

And my python code for the component is as follows:

        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'
            ),
        ],),

I've already attempted to add style={'width': '100%'} under dcc.Checklist, however, that has no effect. If it is important, using pixels instead of percent does adjust the width of the checklist as follows style={'width': '1000px'} . However, this does not dynamically adjust the Checklist's width to the dropdown's width when the window of the application is resized. In addition, the dropdown menu doesn't close itself when the user clicks on a space away from it.

Answer 1

The reason for why setting style={'width': '100%'} on the checklist doesn't work can be seen when you inspect the rendered elements in the browser.

The element you set the width for (with id #hand-filter ) is surrounded by another div with a class of dropdown-menu . So when you set width of #hand-filter to 100% it means 100% of its parent, ie the width of the dropdown-menu div and not your dropdown menu component (with id #hand-dropdown ).

So one solution would be to set the width of the dropdown-menu element instead

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

Another approach would be to use vw instead of % .

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