picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.49k stars 390 forks source link

Modal/Dialog Form tag not supported within article tag #616

Open 78wesley opened 2 days ago

78wesley commented 2 days ago

Describe the issue

When I want to add a <form> within <article> at a <dialog> tag the layout is not of the <header> or <footer> is not there, Because the CSS only looks for article>header, article>footer.

Current Behavior

It is currently not possible to have a modal where the save button is in the footer and still interact with the <form>.

Expected Behavior

The <form> needs to not interact with the styling. It needs to pass through.

Reproduction URL

Normal dialog: https://codepen.io/78wesley/pen/yLmYgPL With form tag dialog: https://codepen.io/78wesley/pen/ZEgbLvG

Environment

OS: Windows 11 Browser: Brave Version 1.70.119 Chromium: 129.0.6668.70 (Official Build) (64-bit)] Pico CSS is: v2.0.6 with (https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css)

TomFaulkner commented 10 hours ago

I found the same issue. Without overrides I currently have to choose between a funny looking form modal or htmx happily submitting empty required fields.