Skip to content

Fix radio and checkbox vertical alignment#1127

Merged
msecret merged 3 commits into
18f-pages-stagingfrom
fix-radio-alignment
May 10, 2016
Merged

Fix radio and checkbox vertical alignment#1127
msecret merged 3 commits into
18f-pages-stagingfrom
fix-radio-alignment

Conversation

@maya

@maya maya commented Apr 18, 2016

Copy link
Copy Markdown
Contributor

This fixes the vertical alignment of checkboxes ☑️ and radio buttons 🔘 (without resorting to use magic numbers). The issue was brought up in #1105, however this supersedes #1105.

This is what it looks like NOW...

Checkboxes:

screen shot 2016-04-18 at 3 59 32 pm

Radio buttons:

screen shot 2016-04-18 at 3 59 39 pm

This is what it looks like BEFORE...

Checkboxes:

screen shot 2016-04-18 at 4 17 45 pm

Radio buttons:

screen shot 2016-04-18 at 4 17 51 pm

*You can see that all of the radio buttons are to low and the first and third checkboxes (Sojourner and Booker) are too low.

@maya

maya commented Apr 18, 2016

Copy link
Copy Markdown
Contributor Author

This PR has design changes @ericadeahl and @carodew. Let me know if it's OK!

@carodew

carodew commented Apr 19, 2016

Copy link
Copy Markdown
Contributor

LGTM!

display: inline-block;
height: 1.8rem;
line-height: 0.8;
line-height: 1.8rem;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if somebody changes their base font sizes, then wouldn't this no longer be aligned? Could this be written so it accounts for that?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, it accounts for that. This only looks at the size of the button not text, it will always be centered.

Here I made the text way bigger and it's still centered:
screen shot 2016-04-19 at 11 25 23 am

@msecret msecret force-pushed the fix-radio-alignment branch from c0a9a95 to ee33a55 Compare May 10, 2016 18:19
@msecret

msecret commented May 10, 2016

Copy link
Copy Markdown
Contributor

I checked out the code and rebased this.

@msecret msecret merged commit 0d55196 into 18f-pages-staging May 10, 2016
@msecret msecret deleted the fix-radio-alignment branch May 10, 2016 18:31
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

Successfully merging this pull request may close these issues.

3 participants