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
Related
I've been using MUI Snackbar and its autoHideDuration option but while testing I noticed that when the page is out of focus, like when you go to another tab, it's paused and the snackbar stays displayed until you focus on the page again.
You can even test this out on the MUI page examples: https://mui.com/material-ui/react-snackbar/
Just have two tabs side by side on the screen, trigger the snackbar, click into the other tab and the snackbar will stay displayed until you click back on the MUI page.
Is this just a side effect of some implementation detail that can't be avoided? Any way around this? I can reproduce this in Chrome and FF.
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.
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 have a simple react application that is using Material-UI components. The application menu drawer doesn't appear in FF 60.4 but works fine in Chrome.
If I change the state of the drawer in the developers toolbox the drawer appears. Its like the menu icon onClick event handler isn't firing: https://codesandbox.io/s/wo29099yvl
Any help would be appreciated, thanks in advance!
If I move your onClick from the MenuIcon to the IconButton, it works fine in FF.
https://codesandbox.io/s/rl9kv3950q
I implemented a drawer in my steroids application with similar styles as google+ drawer. However, I have several links on it, and when my device is in landscape mode I'm unable to see all the links, and I can't scroll the drawer.
I want to be able to scroll the drawer vertically as a normal webview, just like google+ drawer does.
Is that possible?
Can I embed a webview inside another?
I managed to fix this by adding heigh=device-height to the content meta tag. And I added overflow-x=hidden to just allow vertical scrolling.