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

Reduce gap between labels and checkboxes in inline forms #2411

Closed
wrightmartin opened this issue Feb 28, 2019 · 3 comments · Fixed by #2418
Closed

Reduce gap between labels and checkboxes in inline forms #2411

wrightmartin opened this issue Feb 28, 2019 · 3 comments · Fixed by #2418
Assignees
@dracos
Labels
Bug Design

Comments

@wrightmartin
Copy link
Contributor

there is a gap between the tickbox and the ‘Show my name publicly’ field which means the person testing with a zoomed-in screen didn’t see the tickbox

image
@dracos
Copy link
Member

dracos commented Feb 28, 2019

label.inline has a left padding of 1em. Should be 0, or not em-based?

@wrightmartin
Copy link
Contributor Author

Em based means it gets larger with text zoom, which could cause the issue described, so a pixel unit would be better (although for browsers who zoom any other way this doesn't help).

Reducing it to 0 makes it too close, perhaps 5px is a good middle ground?

@dracos
Copy link
Member

dracos commented Mar 4, 2019

Does any browser not do pixel zoom by default now? Anyway, 5px is what gov.uk front end has (though with their giant checkboxes) so sounds good :)

dracos added a commit that referenced this issue Mar 4, 2019
@dracos
Improve inline checkbox spacing.
9a28960 
Reduce the space between checkbox and label, so the text isn't lost if
the page is zoomed in. Fixes #2411.

Replace the creator_fixed question with segmented control to match the
full questionnaire, and the admin verified checkboxes with inline-text
as they need no padding. Having done that, all uses of .inline are now
on their own lines, so no post-padding is needed any longer, but we’ll
leave some in case of future use.
@ghost ghost assigned dracos Mar 4, 2019
@ghost ghost added the In progress label Mar 4, 2019
dracos added a commit that referenced this issue Mar 4, 2019
@dracos
Improve inline checkbox spacing.
e33df8e 
Reduce the space between checkbox and label, so the text isn't lost if
the page is zoomed in. Fixes #2411.

Replace the creator_fixed question with segmented control to match the
full questionnaire, and the admin verified checkboxes with inline-text
as they need no padding. Having done that, all uses of .inline are now
on their own lines, so no post-padding is needed any longer, but we’ll
leave some in case of future use.
@dracos dracos mentioned this issue Mar 4, 2019
Merged
@ghost ghost added Reviewing and removed In progress labels Mar 4, 2019
@ghost ghost removed the Reviewing label Mar 5, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@dracos dracos

Labels
Bug Design
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Improve inline checkbox spacing. mysociety/fixmystreet
2 participants
@dracos @wrightmartin