A couple CSS tricks for HTML Dialog elements
cassidoo.co
A couple CSS tricks for HTML Dialog elements
1–10 of 48 posts
Re: A couple CSS tricks for HTML Dialog elements
#2The trick to prevent scrolling by setting overflow: hidden unfortunately results in visual page jumping for me.
The reason is I have macOS set up to always show scroll bars, instead of hiding them. At least one browser (I forget which, but I test on Safari, Firefox and Chrome) doesn’t have a disabled scroll bar but removes it altogether. This makes the page wider and causes it to reflow and move.
Does anyone know how to keep the scroll bar onscreen, just not enabled?
Re: A couple CSS tricks for HTML Dialog elements
#3The trick to prevent scrolling by setting overflow: hidden unfortunately results in visual page jumping for me. The reason is I have macOS set up to always show scroll bars, instead of hiding them. At least one browser (I forget which, but I test on Safari, Firefox and Chrome) doesn’t have a disabled scroll bar but removes it altogether. This makes the page wider and causes it to reflow and move. Does anyone know how…
Website authors can set a scrollbar gutter.
Re: A couple CSS tricks for HTML Dialog elements
#4The trick to prevent scrolling by setting overflow: hidden unfortunately results in visual page jumping for me. The reason is I have macOS set up to always show scroll bars, instead of hiding them. At least one browser (I forget which, but I test on Safari, Firefox and Chrome) doesn’t have a disabled scroll bar but removes it altogether. This makes the page wider and causes it to reflow and move. Does anyone know how…
It's been a while since I've tested this, but an explicit overflow-y: scroll used to keep the scrollbar there, so that when you needed to change the property, the user-agent controls wouldn't pop in or out.
Re: A couple CSS tricks for HTML Dialog elements
#5Freezing the page isn't so simple, as overflow: hidden messes up things like the sticky header on that page. I had so much trouble with it, I decided to just let users scroll and hide the modal during scrolling: https://radogado.github.io/n-modal/
Re: A couple CSS tricks for HTML Dialog elements
#6Thanks for the article!
I remember I had a hard time trying to stretch dialog to full screen for mobile devices, but it actually didn't want to work. The code was something like this:
dialog { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; }
Re: A couple CSS tricks for HTML Dialog elements
#7The trick to prevent scrolling by setting overflow: hidden unfortunately results in visual page jumping for me. The reason is I have macOS set up to always show scroll bars, instead of hiding them. At least one browser (I forget which, but I test on Safari, Firefox and Chrome) doesn’t have a disabled scroll bar but removes it altogether. This makes the page wider and causes it to reflow and move. Does anyone know how…
It's been a while since I've tested this, but an explicit overflow-y: scroll used to keep the scrollbar there, so that when you needed to change the property, the user-agent controls wouldn't pop in or out.
yes, "html { overflow-y: scroll }" works.
Re: A couple CSS tricks for HTML Dialog elements
#8This is a neat piece of modern CSS:
body:has(dialog[open]) {
overflow: hidden;
}
Re: A couple CSS tricks for HTML Dialog elements
#9This is a neat piece of modern CSS: body:has(dialog[open]) { overflow: hidden; } https://caniuse.com/css-has confirms the has() selector has had widespread browser support since December 2023.
Inert should be used instead of overflow. Achieves the same thing but is also compliant with accessibility in a way overflow isn’t
Re: A couple CSS tricks for HTML Dialog elements
#10This is a neat piece of modern CSS: body:has(dialog[open]) { overflow: hidden; } https://caniuse.com/css-has confirms the has() selector has had widespread browser support since December 2023.
Inert should be used instead of overflow. Achieves the same thing but is also compliant with accessibility in a way overflow isn’t
I still can see my scrollbar and scroll with inert?