search

beercss / beercss

Build material design interfaces in record time... without stress for devs... 🍺💛
https://www.beercss.com
MIT License
940 stars 47 forks source link

Fixed Dialogs Proposal #265

Closed crypnull closed 3 months ago

crypnull commented 3 months ago

I use dialogs a lot on my website, with large dialogs background scrolling can get very annoying and even confusing sometimes for users. I hacked together some messy JavaScript to stop the page scrolling when the dialogs are opened, this can be re-implemented in whatever way is best, as this is just an example of the concept. This also works with multiple levels of dialogs, which I have on my site. This could either be made a default option, and an attribute could be called data-allow-bg-scrolling. Or in this case, I kept the default behaviour, and if the attribute "data-fixed" is added, it prevents scrolling.

Here is the Codepen: https://codepen.io/1971562171/pen/VwRBNdp

On another note, just to stick it in here, border-radius should be 0 on the overlay, since for certain situations it inherits the border-radius which looks strange.

crypnull commented 3 months ago

...

Seems you can just do:

body:has(dialog[open]) { overflow: hidden; }

...