dcc.Dropdown gets cut off in a dmc.Drawer

Dash Python
1

I love the new dcc.Dropdown checkboxes in Dash 4.1 and have been trying to add them to my app to replace dmc.MultiSelect, however I cannot figure out how to fix the overflow getting cut off in the dmc.Drawers. I have been trying as many places to make overflow visible but nothing is working (comparing the old and new below). I have tried adding this to styles in dmc elements, css in all containers that made sense, and have no idea what the problem is!

Any suggestions? Thank you!!!

image
image375×403 17.4 KB

image
image430×427 21.6 KB

image
image1542×972 127 KB

image
image1186×876 92.8 KB

2

I was able to create a minimal example

dmc.Drawer(
    id="drawer",
    opened=True,
    position="top",
    size="20%",
    children=[
        html.Div(
            dcc.Dropdown(
                options=['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'],
                value='Option 1'
            ),
            style={'overflow': 'visible', 'padding': '20px'} 
        )
    ],
)

image
image1261×306 13 KB

3

Hi @alexrblohm

You were correct that the fix requires setting the overflow to visisble, but rather than apply this to the Drawer children it needs to be applied to the Drawer content container which you can target using the content selector.

In the DMC docs, you will find all the selectors that can be applied to various elements in the Drawer: https://www.dash-mantine-components.com/components/drawer#drawer-selectors

You can use the styles API to add it in-line like this:

dmc.Drawer(
    id="drawer",  
    styles={"content": {'overflow': 'visible', 'padding': '20px'}},
   #...
)

Or add it to a .css file:


.mantine-Drawer-content {
    overflow: visible;
}
1 Like
4

Thank you for the quick response! I tested both and the styles did NOT fix the issue (I noticed the subtle content part). However the CSS worked great! That is my preferred solution anyway because I use these drawers on every page of my app.

Thank you!!!

5

Glad the CSS worked for you. The inline should work as well, here’s a complete minimal app

see it live on PyCafe

import dash_mantine_components as dmc
from dash import Dash,html, dcc

app = Dash()

component = dmc.Drawer(
    id="drawer",  
    styles={"content": {'overflow': 'visible', 'padding': '20px'}},
    opened=True,
    position="top",
    children=[
        html.Div(
            dcc.Dropdown(
                options=['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'],
                value='Option 1'
            ),            
        )
    ],
)


app.layout = dmc.MantineProvider(
    component,
     forceColorScheme="light",
    
)

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

image
image3392×1446 482 KB