Modal background does not respect non statically positioned elements about tailwindcss-stimulus-components HOT 6 CLOSED

Hey @gjrevans can you post a codepen or something showcasing the issue?

I think the appending of the background makes sense and is probably the way to do it, but we may also have to dynamically generate the modal down there too, which would be not a simple change.

from tailwindcss-stimulus-components.

Hey @excid3,

Here's a codepen showcasing the issue: https://codepen.io/gjrevans/pen/GVRYMm?editors=0010.

You shouldn't need to dynamically generate the modal. Just ensure the modal's position is set to something other than static (so that it respects z-index) and give it a z-index higher than the modal background which will get dynamically appended at the end of the body.

P.S. A few friends and I ran into this issue while using Jumpstart package you created. We grabbed the pro license as we wanted to give Stimulus / Tailwind a go. Thanks for putting that solution together, it's great!

from tailwindcss-stimulus-components.

Here's a very rudimentary working version with the suggested improvement: https://codepen.io/gjrevans/pen/gVOqxW

I've moved the modal background out of the HTML side of things, created a local variable in the modal controller for modalBackground and then append & remove it using the open & close actions. I've also updated the closeBackground function to instead closeContainer as the background was no longer necessary.

The modal background has a z-index: 40 and the modal container a z-index: 50 (and is position: fixed and thus it and it's children will respect z-index). Arguably it would be better to assign them much higher z-index values like 1000 and 1010 to ensure they are alway on top of everything -- this could be done inline to avoid creating new classes as you've already done with the transparent background.

from tailwindcss-stimulus-components.

Fantastic, thanks so much. This will be good to have fixed. 👍

I agree, we may want to use like an inline z-index specified above the max that Tailwind offers, that way we can make sure it's above any other z-50 items on the page. This may not be an issue, if the z-50 of the background takes precedence since it's the very last item in the DOM. Plus people may customize Tailwind to add like a z-1000 and we'd want to handle that case too ideally.

from tailwindcss-stimulus-components.

Thanks! This is fantastic.

Last night I went and updated everything to work similar to your codepen. I made a few enhancements to allow customizing the backdrop and such.

Just released it as 1.0.0, so hopefully everything is good. This is backwards incompatible because of the HTML changes, hence the major version bump.

from tailwindcss-stimulus-components.

@excid3 that’s awesome! 👏 Happy it helped, thanks for putting that through so quickly!

from tailwindcss-stimulus-components.