Closed reubenfirmin closed 1 week ago
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
Hey everyone,
Just released v2.4.1
with an update to the modals.
Is this still happening to you alll?
If it does, feel free to re-open the issue.
Cheers, Zotlan
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.