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
Related
I use React MUI and some components disable my draggables.
I have put draggables on my page, that works perfectly.
When my draggable is dragged, I change some nodes in the page.
I'm on React MUI and I use tooltips, modals and menus on that page. After opening one of them and close it, no draggables can be dragged anymore. I mean that changing some nodes in the page makes that the drag ends directly.
Is there an event inserted or something like that that ends the drag action if an element is changing in the page ?
I found a workaround.
Actually this happens on Chrome and Safari only. Adding a setTimeout of 10ms before changing the DOM makes the job.
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.
https://codesandbox.io/s/Op8BoLzQ
If you click on the first line, the editor cursor will show, but if you click on blank space below, nothing will happen.
I've tried to set min-height to height, now it is acting correctly regarding this issue, but the content is not auto-resizable anymore.
Yes. The problem is that the part of the editor that's contentEditable is only one line right now, here's a screenshot to illustrate which part of the editor is the dom node with contentEditable set to true.
Instead, if you want to make the area of the editable interface larger, you need to style .public-DraftEditor-content
I've forked the sandbox to show this
That fixes the issue.
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;
}
I have an off panel menu working perfectly on a site. The user can open and close it using both a navicon or sliding it with the finger.
Right now I have a very nice navicon icon that transitions from Menu Icon to X Icon when is clicked (and opens the menu) and the other way around when is clicked again and the menu closes. Buuut if the user slides the menu open or closed instead of using the navicon, the transition is not triggered, which might lead to confusions on the UX (i.e. the menu being closed, and the navicon showing an X instead of the regular 3 horizontal lines icon).
So, the navicon has right now the following code to trigger the transition:
ng-click="open = !open" ng-class="{'open-mob':open}">
I thought that a nice and easy way to fix this, would be to trigger this "open = !open" every time that the menu is open or closed, as the js from the off panel adds the class slidRight to the main section when the menu is open, and removes it when it is closed.
Being so, is there some straight way to check if the class is there using AngularJS?
Something like if class = slidRight -> "open = !open".
Thanks!!
for those (including me) who could not get their head around Angular's documentation, here is an example which worked for me:
angular.element(myElement).hasClass('my-class');
angular.element(myElement).addClass('new-class');
angular.element(myElement).removeClass('old-class');
hope this help someone ...
Angular uses jqLite's .hasClass() natively.
Read here on the angular docs for more info.
http://docs.angularjs.org/api/angular.element
https://docs.angularjs.org/api/ng/function/angular.element