search

htmlstreamofficial / preline

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.
https://preline.co
Other
4.61k stars 288 forks source link

Modal backdrop have no size #461

Closed sakkyoi closed 3 weeks ago

sakkyoi commented 3 weeks ago

Summary

modal backdrop have no size when opened

Steps to Reproduce

example from overlays-modals work properly in the example page, but the size is 0x0 in astro.

Demo Link

https://codesandbox.io/p/devbox/youthful-cherry-lff6gm?workspaceId=3b97d20c-968b-44b2-99e1-4a9d21d4d708&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0m0mqbf00072e69cbjhe24w%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0m0mqbe00022e69dlyvy7w4%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0m0mqbe00042e69qdvw7y0j%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0m0mqbf00062e699t8ez4hs%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0m0mqbe00022e69dlyvy7w4%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0m0mqbe00012e69zy63driy%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522cm0m0mqbe00022e69dlyvy7w4%2522%252C%2522activeTabId%2522%253A%2522cm0m0mqbe00012e69zy63driy%2522%257D%252C%2522cm0m0mqbf00062e699t8ez4hs%2522%253A%257B%2522id%2522%253A%2522cm0m0mqbf00062e699t8ez4hs%2522%252C%2522activeTabId%2522%253A%2522cm0m0msfz000m2e69tukjsal1%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0m0mqbf00052e69vxphcrad%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A4321%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A4321%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cm0m0msfz000m2e69tukjsal1%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm0m0mqbe00042e69qdvw7y0j%2522%253A%257B%2522id%2522%253A%2522cm0m0mqbe00042e69qdvw7y0j%2522%252C%2522activeTabId%2522%253A%2522cm0m0up5e000t2e683cf6dbhb%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0m0mqbe00032e69irsh7o8q%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522npm%2520install%2520preline%25402.4.1%2522%252C%2522id%2522%253A%2522cm0m0up5e000t2e683cf6dbhb%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522npm%2520install%2520%2540astrojs%252Fmdx%25403.1.5%2522%252C%2522id%2522%253A%2522cm0m0v2zr001r2e68fes6qv7o%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522npm%2520install%2520%2540astrojs%252Ftailwind%25405.1.0%2522%252C%2522id%2522%253A%2522cm0m0v3lz00212e68nysycrje%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522npm%2520install%2520%2540types%252Fcanvas-confetti%25401.6.4%2522%252C%2522id%2522%253A%2522cm0m0v48o002b2e689pos7o81%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Expected Behavior

the modal must have a full sized backdrop.

Actual Behavior

the modal have a 0x0 sized backdrop.

Screenshots

Screenshot 2024-09-03 at 2 13 37 PM
sakkyoi commented 3 weeks ago

i just do a quick fix by adding

class="hs-overlay-backdrop-open:w-screen hs-overlay-backdrop-open:h-screen hs-overlay-backdrop-open:top-0 hs-overlay-backdrop-open:left-0"

to the modal's container

but this still must be some kind of bug and should not be fixed by this way.

sakkyoi commented 3 weeks ago

oh no. this is literally my fault. i forgot to add 'node_modules/preline/dist/*.js' to content under tailwind.config.