I'm trying to open a modal page generated from a click in my popup but the modal page stays backward the popup. Any idea how to handle that?
I tried to play with :
.popup-open .backdrop {
z-index: 11;
}
without success
In fact, just modify $z-index-modal to 13 in SCSS variables.
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
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 am using Angular js. The issue is when bootstrap model open by default .modal-backdrop class is applying and because of this whole screen get dim and not enable. please suggest me something.
$(".modal-backdrop").fadeOut()
$("#formId").removeClass('.modal-backdrop')
By design a modal is supposed to overtake control of the screen, hence the backdrop.
That being said, you can display the modal without the backdrop.
$("#myModal2").modal({backdrop: false});
https://getbootstrap.com/docs/4.2/components/modal/#options
Angular has configuration as well
config.backdrop = false;
https://ng-bootstrap.github.io/#/components/modal/examples#config
Here is a stackblitz example with backdrop disabled
https://stackblitz.com/angular/aqvnlngdjon
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