Skip to content
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

Ticks on checkboxes inside details element not rendering correctly #929

Open
andymantell opened this issue Mar 7, 2024 · 1 comment
Open
Assignees

Comments

@andymantell
Copy link
Contributor

Bug Report

What is the issue?

If you put a checkbox inside a details element, the tick is too large and not centred correctly.

image

What steps are required to reproduce the issue?

Combine the details and checkbox examples from the design system as per this codepen:

https://codepen.io/andymantell/pen/KKYdjxE

What was the environment where this issue occurred?

  • Device: Windows PC
  • Operating System: Windows 11
  • Browser: Google Chrome
  • Browser version: 122
  • NHS.UK frontend package version: 8.1.0
@andymantell andymantell self-assigned this Mar 8, 2024
@andymantell
Copy link
Contributor Author

andymantell commented Mar 14, 2024

Thanks to @Fenwick17 - we've worked out that adding this CSS fixes the issue:

.nhsuk-label {
  box-sizing: border-box;
}

It's slightly baffling me why the label is inheriting a box-sizing differently inside the details element... But this fix does seem to work, and it's pretty harmless since border-box is what we'd want it to be anyway. I've stuck it in our service's "shame.scss" for the moment - will do a PR once we've been through testing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant