Modal overlay not overlaying other kiwi components
rohanpahwa27 opened this issue · 5 comments
Use this ONLY for reporting bugs. For requesting new features check this link.
I've been trying to use a modal, but the other kiwi components I'm using do not have the overlay going on them.
Expected Behavior
The inputfield and button should not be active
Current Behavior
Right now, the overlay works on everything but the inputField and button. The modal has the closebutton in it in the middle of the screen, and at the bottom, the inputfield and button are still active in the background.
Possible Solution
Just have to fix the input field and button becoming a part of the overlay.
Steps to Reproduce
Create an input field, button outside of the modal, and see that they're not getting overlaid.
Context (Environment)
I've been using react to create a web application, but this design problem is a blocker for me.
Hello @rohanpahwa27 👋
Could you provide us with some source code, so we can investigate the issue?
I have the same thing, anything with z-index:1 will just overlay the modal
@mapsgeek we would highly appreciate some source code, preferably a CodeSandbox demo or something similar 🙏
Modal has a z-index of 800 currently, so I think there's something else going on in your code. Note that the z-order can also be controlled with the HTML order, which is a highly recommended alternative to z-index wars because it makes it much more predictable and easier to manage. Also, just in case you missed it, Modals should generally be rendered inside the Portal component, that way you can easily place the Portal element to be the last one in your <body>, so that Modals are always on top. If it still somehow manages to appear below another element, that can only happen if that element has a z-index higher than 800.
I'm closing this issue until a demo is provided reproducing this bug.