i have a long signup form designed in angular-material. i have used toast to make UI more interactive. toast is working perfectly with its positioning too. but my html page is not fixed to its height, the toast appears to its position in the initial state of the page. but when i scroll down the page the toast is hidden, and i have to scroll up to see the toast. how to fixed the page height or any other way to present toast like a modal.any suggestion would be highly appreciated.
Try this style:
md-toast {
position: fixed !important;
}
Related
I am using react-full-screen node package to make a full screen component, however modals, popovers, and drawers do not work.
Could you please help me make a working modal within my full screen component?
Are you sure it doesn't work ? maybe your modals are well displayed but behind your fullscreen component (did you use devtool's element inspector to check the html / css to see if your modal was here ?).
You might need to enrich your modal's css to make it visible ahead of fullscreen component, a mere z-index: 2 on the modal' style could help ?
I'm not sure how to make the 'Popover' component of Material UI remain fixed on the screen when I open it. Because when I open the popover (https://mui.com/material-ui/react-popover/) It's not blocking the scroll and the box that appears after clicking is moving along the entire page. I don't want to keep the scroll bar visible while popover is open.
I'm using the latest version.
Image below
enter image description here
You can add overflow: hidden; to body element and remove it on close :) Tho its a weird behavior in docs as in source code there is no such thing, yet it happens
I have implemented the material UI Drawer as per the responsive example on Material UI's website. On larger screens, how do I get the drawer to scroll with the whole page? At the moment, if the contents of the drawer become too long, a vertical scroll bar appears on the drawer itself which I o KY want to happen on smaller devices.
Here is a link to the code on Material UI's site:
https://material-ui.com/components/drawers/#responsive-drawer
I have tried overflow: hidden but obviously the contents then cut off and hide the content!
Any help would be much appreciated.
Many thanks
I guess it's because you specify height in your styles... Remove it or make it auto. It's a long shot, you should provide your css :)
In react js when i click the pushbar icon ,the pushbar has been opened ,but the background of pushbar(i mean hole body of content) is scrolling, i want to stop the background scroll, so any one please help me ,thanks in advance
It is not react issue. Moreover, try adding overflow: hidden to body tag when pushbar is opened and reset overflow: auto when pushbar is closed.
I'm creating an AngularJS application which has a loader, but since angular is really fast (yay), the page jumps between the loadings (nay :/) - what happens, is when the loading screen comes up, the scrollbar gets hidden and when a new page loads, the scrollbar is put back, this creates a flickering in the menu(always visible) part on top of the page.
Same thing happens when I open a pop-up or smth. like that. I add overflow: hidden; to the body in DOM so the user can't scroll when a pop-up is opened, but again this hides the browser scrollbar and the page jumps.
Any ideas how to solve this UX problem?
Ok, found a rather simple solution
html {
height: 100.001%;
overflow-y: scroll;
}