-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Reset dialog element styles #11069
Reset dialog element styles #11069
Conversation
src/css/preflight.css
Outdated
margin: 0; | ||
border: none; | ||
padding: 0; | ||
background: transparent; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
One more nit here - with a double space before transparent
How should we handle the remaining properties on dialog? Should we also reset:
|
Thanks for the PR! Personally I think this reset can be simplified to just this: dialog {
padding: 0;
}
Happy to merge this if it can be rebased on top of the current conflicts and simplified to just the padding reset 👍 |
I rebased this PR on master so you don't have to worry about that 👍 |
We don’t want to reset everything here. Just the padding should be enough.
Thanks! I've updated it to just the padding reset and merged this in. It'll be available in our next tagged release. Appreciate it! ✨ |
I just ran into an issue with More than happy to file an issue for this one if needed. |
* disable useragent styling for dialog * nits * Update src/css/preflight.css * Simplify dialog reset We don’t want to reset everything here. Just the padding should be enough. * Update test --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com> Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* disable useragent styling for dialog * nits * Update src/css/preflight.css * Simplify dialog reset We don’t want to reset everything here. Just the padding should be enough. * Update test --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com> Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* disable useragent styling for dialog * nits * Update src/css/preflight.css * Simplify dialog reset We don’t want to reset everything here. Just the padding should be enough. * Update test --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com> Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Tailwind 3.3.3 introduced a change by which the default user agent dialog element padding is reset to none: tailwindlabs/tailwindcss#11069 This caused the dialog to consistently not display as intended accross browsers. To fix that, let's manually set the padding to the one we expected.
Tailwind 3.3.3 introduced a change by which the default user agent dialog element padding is reset to none: tailwindlabs/tailwindcss#11069 This caused the dialog to consistently not display as intended accross browsers. To fix that, let's manually set the padding to the one we expected.
The HTML dialog element has a lot of default styling coming from the user agent (chromium, mozilla, looks like safari don't style dialogs at all).
I noticed this when trying to debug why I was getting a 16px padding regardless of what my styling was. Except padding it looks like there are also styles for colors and a border. This feels like a bug as I'm used to tailwind's preflight providing a pretty good "blank slate" of expected styling. Some of the other styles (like the positioning) seem reasonable as they are pretty close to what I came up defining by myself for the dialog.