Drawer with scroll (Dash Mantine Components)

Dash Python
1

We can see here that the Drawer component of Mantine can have a vertical scroll bar.

At Dash Mantine Compoents web page (here) we can see that the component in Dash has a prop that is:

  • lockScroll (boolean; optional):
    Disables scroll lock.

I’m assuming this prop is exactly what I’m looking for: the prop that turns on/off the vertical scroll bar.

But setting it to True or False is not enabling the scroll…any idea why?

Sample code to replicate the issue below.

Thank you.

# Imports.
from dash import Dash, Input, Output
import dash_mantine_components as dmc

# Creates a Dash app.
app = Dash(__name__)

# Defines the app's layout.
app.layout = dmc.Container(
    children=[
        dmc.Button("Open Drawer", id="drawer-demo-button"),
        dmc.Drawer(
            lockScroll=True, # True or False here changes nothing?!
            id="drawer-simple",
            children=[
                dmc.Text('Could be anythin here...'),
                dmc.Text('Just a plenty of components...'),
                dmc.Text('...to go beyond the screen height...'),
                dmc.Text('...and enable the scroll bar.'),
                dmc.Text('01'),
                dmc.Text('02'),
                dmc.Text('03'),
                dmc.Text('04'),
                dmc.Text('05'),
                dmc.Text('06'),
                dmc.Text('07'),
                dmc.Text('08'),
                dmc.Text('09'),
                dmc.Text('10'),
                dmc.Text('11'),
                dmc.Text('12'),
                dmc.Text('13'),
                dmc.Text('14'),
                dmc.Text('15'),
                dmc.Text('16'),
                dmc.Text('17'),
                dmc.Text('18'),
                dmc.Text('19'),
                dmc.Text('20'),
                dmc.Text('21'),
                dmc.Text('22'),
                dmc.Text('23'),
                dmc.Text('24'),
                dmc.Text('25'),
                dmc.Text('26'),
                dmc.Text('27'),
                dmc.Text('28'),
                dmc.Text('29'),
                dmc.Text('30'),
                dmc.Text('31'),
                dmc.Text('32'),
                dmc.Text('33'),
                dmc.Text('34'),
                dmc.Text('35'),
                dmc.Text('36'),
                dmc.Text('37'),
                dmc.Text('38'),
                dmc.Text('39'),
                dmc.Text('40'),
                dmc.Text('41'),
                dmc.Text('42'),
                dmc.Text('43'),
                dmc.Text('44'),
                dmc.Text('45')
            ]
        )
    ]
)

# App's callback.
@app.callback(
    Output("drawer-simple", "opened"),
    Input("drawer-demo-button", "n_clicks"),
    prevent_initial_call=True,
)
def drawer_demo(n_clicks):
    return True

# Runs from this script.
if __name__ == '__main__':
    
    app.run_server(debug=True, port=8050)
2

Hello @Danilo_BR !

Maybe first thing to note that the documentation you are referring to is running on Mantine v6, however DMC 0.12 is running on Mantine v5. You can change the version of Mantine documentation in header. @snehilvj has already released alpha version of DMC 0.13.0a2 running on Mantine v6. So the first solution is to try the new alpha version and try if the property is there. But be careful, it is still and alpha version and it may contain bugs (and also some breaking changes).

BUT! There is an option how to do this even on DMC 0.12. There is component ScrollArea which is somehow not in the docs, but drawer from official DMC documentation uses it (and I use it also for my menu browsers :)). You can see the code here:

I hope this helps :slight_smile:

3

Not sure what I’m missing here… :cold_sweat:
I tried to replicate the usage of the dmc.ScrollArea at my example (see below) but the scroll bar is still not showing. :pensive:

BTW, what the zIndex parameter at the dmc.Drawer means?

Thanks!

# Imports.
from dash import Dash, Input, Output
import dash_mantine_components as dmc

# Creates a Dash app.
app = Dash(__name__)

# Defines the app's layout.
app.layout = dmc.Container(
    children=[
        dmc.Button("Open Drawer", id="drawer-demo-button"),
        
        dmc.ScrollArea(
            offsetScrollbars=True,
            type="scroll",
            children=[
        
                dmc.Drawer(
                    id="drawer-simple",
                    zIndex=9,
                    children=[
                        
                        dmc.ScrollArea(
                            offsetScrollbars=True,
                            type="scroll",
                            children=[
                        
                                dmc.Text('Could be anythin here...'),
                                dmc.Text('Just a plenty of components...'),
                                dmc.Text('...to go beyond the screen height...'),
                                dmc.Text('...and enable the scroll bar.'),
                                dmc.Text('01'),
                                dmc.Text('02'),
                                dmc.Text('03'),
                                dmc.Text('04'),
                                dmc.Text('05'),
                                dmc.Text('06'),
                                dmc.Text('07'),
                                dmc.Text('08'),
                                dmc.Text('09'),
                                dmc.Text('10'),
                                dmc.Text('11'),
                                dmc.Text('12'),
                                dmc.Text('13'),
                                dmc.Text('14'),
                                dmc.Text('15'),
                                dmc.Text('16'),
                                dmc.Text('17'),
                                dmc.Text('18'),
                                dmc.Text('19'),
                                dmc.Text('20'),
                                dmc.Text('21'),
                                dmc.Text('22'),
                                dmc.Text('23'),
                                dmc.Text('24'),
                                dmc.Text('25'),
                                dmc.Text('26'),
                                dmc.Text('27'),
                                dmc.Text('28'),
                                dmc.Text('29'),
                                dmc.Text('30'),
                                dmc.Text('31'),
                                dmc.Text('32'),
                                dmc.Text('33'),
                                dmc.Text('34'),
                                dmc.Text('35'),
                                dmc.Text('36'),
                                dmc.Text('37'),
                                dmc.Text('38'),
                                dmc.Text('39'),
                                dmc.Text('40'),
                                dmc.Text('41'),
                                dmc.Text('42'),
                                dmc.Text('43'),
                                dmc.Text('44'),
                                dmc.Text('45')
                            ]
                        )
                    ]
                )
            ]
        )
    ]
)

# App's callback.
@app.callback(
    Output("drawer-simple", "opened"),
    Input("drawer-demo-button", "n_clicks"),
    prevent_initial_call=True,
)
def drawer_demo(n_clicks):
    return True

# Runs from this script.
if __name__ == '__main__':
    
    app.run_server(debug=True, port=8050)
4

Oh you have to set a fixed height of the scrollarea! :slight_smile:

If you have more than one floating component -i.e. Drawer, Menu or Header they have a 3rd dimension of zIndex - it sets the order how they are rendered on top of each other