Modal backdrop no longer shows in 2.3.0
reubenfirmin opened this issue · 10 comments
Describe the bug
I upgrades from 2.0.0 to 2.3.0. The opaque backdrop div is no longer rendered with modals; previously it was inserted as the last child in the body (although there was a bug where several could be added).
To Reproduce
I've tried both static and dynamic modals. Static certainly adds a backdrop of some kind in that background elements are not clickable. However, the opaque layer is not shown.
I tried setting backdropClasses as an attribute, but that doesn't appear to work.
Hey @reubenfirmin,
Please update to Tailwind CSS v3.0+. The modal backdrop is still there, but the gradient classes are now changed from the deprecated ones to the new ones: bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40
.
Cheers,
Zoltan
@zoltanszogyenyi I do see the modal-backdrop div in your samples, but it's no longer appearing in mine. I.e. there's literally no modal-backdrop element present.
Here's my body, vs yours.
(I was on tailwind 3.3.5, upgraded to 3.4.0 now but no diff)
Can you double-check the installation? Try clearing the cache. If it doesn't work, can you send the code over some environment so that I can reproduce it? Thanks!
@zoltanszogyenyi OK - did a clean build, flushed my cache, and also tried another browser.
You'll have to squint a bit, since this is kotlin, but hopefully interpretable:
class Modal(private val modalId: String, consumer: TagConsumer<*>):
DIV(mapOf("class" to "hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center " +
"items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"), consumer) {
fun render(block: FlowContent.() -> Unit) {
id = modalId
tabIndex = "-1"
attributes["aria-hidden"] = "true"
attributes["data-modal-backdrop"] = "static"
div("relative p-4 w-full max-w-2xl max-h-full") {
div("relative bg-white rounded-lg shadow dark:bg-gray-700") {
block()
}
}
}
}
... and then
modal("supplierModal") {
div {
id = supplierForm.id
}
}
...
div("flex justify-end w-full") {
rcpButton(SECONDARY, "Add New Supplier",
withNavigation(createSupplierRoute)
.after(withFlowbite(mapOf("data-modal-target" to "supplierModal",
"data-modal-toggle" to "supplierModal"))))
}
@zoltanszogyenyi Hey, since this is closed, did you lose track of it? Still an issue.
For some reason, I've got the same issue
I find that manually adding this to the complied CSS file fixed my problem
.inset-0{ inset: 0px; }
edit: but in my case, I do have the backdrop element its just 0x0 and not visible