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.

Sign up for GitHub

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

Jump to bottom

Content of conditionally revealed checkboxes and radio buttons is misaligned #5069

Closed
querkmachine opened this issue Jun 14, 2024 · 0 comments · Fixed by #5070
Closed

Content of conditionally revealed checkboxes and radio buttons is misaligned #5069

querkmachine opened this issue Jun 14, 2024 · 0 comments · Fixed by #5070
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) checkboxes design radios

Comments

@querkmachine
Copy link
Member

querkmachine commented Jun 14, 2024 •
edited
Loading

Description of the issue

The border and text of conditionally revealed content in Checkboxes and Radios is misaligned with respect to the input and label, appearing slightly too far to the left.

This is a visual regression that seems to have crept into one of the 5.x releases of Frontend. This issue was not present in older versions.

Reported by @MartinJJones via Slack.

Steps to reproduce the issue

View expanded checkboxes or expanded radios in any browser or screen size.

Screenshot of some checkboxes. The first one is checked, revealing an additional label and text input below it. The border, label and text input are all aligned a few pixels further left than the input and label above. Screenshot of some radio buttons. The first one is checked, revealing an additional label and text input below it. The border, label and text input are all aligned a few pixels further left than the input and label above.

Actual vs expected behaviour

The border and text should be aligned.

Environment (where applicable)

  • Operating system: All
  • Browser: All
  • Browser version: All
  • GOV.UK Frontend Version: 5.4.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 bug Something isn't working the way it should (including incorrect wording in documentation) checkboxes design radios
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix alignment of content in conditional checkboxes and radio buttons alphagov/govuk-frontend
1 participant
@querkmachine