I'm using the React Bootstrap modal, and when its open, the background is typically shaded and overlayed with the modal. However, certain elements (specifically the Material UI Drawer http://www.material-ui.com/#/components/drawer) don't get shaded and render over the modal. Does anyone know why this is?
I tried messing around with the zIndex values for the components, and made sure the modal's was higher, but got the same result. The Material UI Drawer has a 'zDepth' attribute which I also tried changing, but to no avail.
Thanks!
Adjusting the z-index of the modal and modal-backdrop higher to 1300 solves the issue for me!
Related
When the first rendering, Material UI components is so weird.
Select is not full length, TransferList is not filled color, Button also.
And when I refresh browser, it's fine.
Is there some specific setting for that?
I think I use material ui normal way.
Thank you.
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 developed a directive to maintain inline help for a widget from a dropdown bootstrap menu, but when I click help from the dropdown, the popover is currently bound to the element and cannot be separated, so it opens absolute from that position.
But the requirement would be if we click help in the dropdown we have show popover like below
I am not sure if it even possible, anyways I'll list down the efforts that I made.
Angular-UI Bootstrap does not help, it does not possess any capabilities to programmatically trigger like bootstrap.
However, In Angular-UI Bootstrap we can add triggers which was done by Elijen, but it would be divided into two components.
My issue would be to create a single directive housing both the trigger and the popover like the second image. I don't want to kill the sanity of bootstrap by overiding the CSS. I wanted to know either we could write a method to detect the position and move to the top of the widget or anything like that, since it would be a reusable component.
The reason why it's a single directive is, it would be packed into webpack and made a cross-cutter tool.
The angular-ui-bootstrap popover listens to the popover-is-open attribute to support opening the popover programmatically.
I'm trying to implement the Material Design's Sidenav. I've got it to work correctly, but I was wondering if I can add templates to it like the mdDialog templates so that I can view different information on it?
I also was wondering how to get the side animation to work as for me right now, it just appears and has a fading black overlay.
Thanks
I am using UI Bootstrap for just datepicker control.
By default when we mouse hover inside textbox, it shows up 3 images (close button, up down spinner, button)
I want to remove the first 2 images and change the last one to some other image.
I went through jS code but could not find any code for that.
Anyone who has similar requirement or knows about the code, please help.
Thanks in advance.