I use Material UI in my project. I have scrollable tabs inside the swipeable drawer. In the mobile version when I scroll tabs right side (like the image below) my drawer has been closed [drawer opens from the right side and closes from the left side]. But I want to scroll tabs without closing the drawer. Only scrolling tabs do not close the drawer. But swiping another element drawer will be closed. Can anyone help me by giving the solution? Thanks in advance.
Related
Has anyone used react-pro-sidebar before? I am trying to make the sidebar sticky and allow my content to scroll. But every time my content goes below the viewport, the sidebar is not sticking.
I have implemented the MUI react drawer with a swipeable edge. On mobile, I am seeing two different actions. When I touch the edge, the drawer opens temporarily. When I swipe up on the edge, the drawer opens permanently. I would like to disable the action where the drawer temporarily opens on touch. The reason is that when I swipe up on the edge, the drawer 'flickers' because the two actions are happening at the same time.
Any ideas on how to do this?
To demonstrate this behaviour, I have included the MUI swipeable edge drawer CodeSandbox. The swipe action can be tested by opening inspect tab and toggling the device toolbar.
CodeSandbox
I went through the same issue and found it was solved recently by the MUI team: https://github.com/mui/material-ui/pull/34505
I am using material-ui as the UI package for an app.
In the app I'm using material-table with a custom infinite scroll.
When a row is clicked, a drawer opens from the right of the webpage.
Once the drawer opens, the background of the drawer (the infinite scroll table and general page) automatically scrolls back to the top of the page.
This makes this page very unfriendly to users.
I've tried the solutions that are mentioned here, but it doesn't seem to work.
I tried to use it like this:
<Drawer ModalProps={{disableRestoreFocus: true}} disableRestoreFocus>{content}</Drawer>
I couldn't find anymore information on material-ui github, or here on stack overflow.
Has anyone encountered this issue or know any other options I can try?
Thanks in advance.
For material-ui v4, you can add this attribute on the drawer component:
disableScrollLock={true}
I am using Mini variant drawer from Material UI and its working fine but in this drawer when I open the nav bar and click anywhere outside the nav bar, it isn't closing. Just like in Temporary drawer. I tried to implement but failed.
Mini variant drawer
https://codesandbox.io/s/6xdsb?file=/index.js
Temporary drawer
https://codesandbox.io/s/ktmju
Any help would be really appriciated.
The Mini Variant is a Persistent Drawer, and from the Material UI website:
Persistent navigation drawers can toggle open or closed. The drawer
sits on the same surface elevation as the content. It is closed by
default and opens by selecting the menu icon, and stays open until
closed by the user.
So it is not meant to be closed when the user clicks outside of it.
Although I'm not sure why you want to implement this functionality with a persistent drawer but maybe this Material UI util will help you
Material UI Click Away Listener
I've a couple of tabs in a form. If I open side menu and try to slide the side menu out, rather than closing the side menu the components of the tabs move. How can I solve it?
Have a look at the video here.
This is probably a bug we should find a way to fix. However, I'm not sure if we can do so easily as both the tabs and side menu rely on the pointer event listeners of the parent Form.
I'm afraid that at this time the only workaround is to disable tab swiping.