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)