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}
Related
I've been trying to implement the temporary drawr on my project together with the responsive and elevated app bar, the responsiviness is working right but the transition of the drawer is gone, aswell as the hover effect of the list items the link how the header of my project is right now
I've tried to search but none of the results helped me.
Thanks in advance!
Material UI is documentation is unarguably most close to perfect open source project docs for react developers but there are some unclear things like exact difference between Popover and Popper. Can someone explain me in short what is the core difference between this two ??
As it's explained in the doc :
Popover
Things to know when using the Popover component:
The component is built on top of the Modal component. The scroll and
click away are blocked unlike with the Popper component.
Popper
Clicking away does not hide the Popper component. If you need this
behavior, you can use ClickAwayListener - see the example in the menu
documentation section.
A PopOver behaves more like a modal, blocking user action/scroll until it is dismissed with a click outside of itself.
Popper is just a thing that pops, doesn't impose anything upon the user, and doesn't disappear by default if you click away, so it's less intrusive to the user experience.
To make a Material-UI Grid or component fixed always visible at the top of the page even when page scroll down.
You can use react-sticky to do this, please check this out React-sticky
Please check this out Dock App Bar to top of window in react material ui, I think this Question is already answered here.
I have a list in a drawer that is docked to the browser screen (desktop) and I want to expand the content of the list item to fill the entire drawer when I click on it just like explained in this demo:
I could find ways of doing it using Android but not using react material-ui V1.0.
Has anyone already done something like it?
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.