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

Fix horizontal overflow for selects with long names in sidebar #3786

Merged
merged 2 commits into from Dec 4, 2017

Conversation

Projects
None yet
4 participants
@laras126

laras126 commented Dec 3, 2017

Description

Fix for #3518.
The select element was not responding to Flexbox appropriately in Webkit browsers.

How Has This Been Tested?

Device: MacBook Pro 2015
Browsers: Chrome 62.0.3202.94, Safari 11.0.1, FireFox 57.0.1

Screenshots (jpeg or gifs if applicable):

sidebar-author-select

Types of changes

Adding a min-width: 0; to select elements solves this issue.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows has proper inline documentation.

@laras126 laras126 changed the title from Use min-width to make select respond to Flexbox to Fix horizontal overflow for selects with long names in sidebar Dec 3, 2017

@iseulde iseulde requested a review from aduth Dec 3, 2017

@iseulde

iseulde approved these changes Dec 3, 2017

Tested and looks great, especially after the last change that makes sure the label does not shrink at smaller widths.

@laras126

This comment has been minimized.

Show comment
Hide comment
@laras126

laras126 Dec 3, 2017

To expand on the last commit for the label -
label-fix
Note that the "After" screenshot above shows the label for "Stick to the front page" wrapping, but I modified the max-width in my last commit to be a bit larger so this does not happen.

laras126 commented Dec 3, 2017

To expand on the last commit for the label -
label-fix
Note that the "After" screenshot above shows the label for "Stick to the front page" wrapping, but I modified the max-width in my last commit to be a bit larger so this does not happen.

@youknowriad youknowriad merged commit 7efa54c into WordPress:master Dec 4, 2017

2 checks passed

codecov/project 37.7% remains the same compared to 499b320
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
label {
margin-right: 10px;
flex-shrink: 0;
max-width: 75%;

This comment has been minimized.

@aduth

aduth Dec 4, 2017

Member

Was this necessary?

@aduth

aduth Dec 4, 2017

Member

Was this necessary?

This comment has been minimized.

@laras126

laras126 Dec 4, 2017

Not necessary for the fix itself, but it balances out the label width to keep it from wrapping when the select is long and label short - see this comparison:

label-fix

Note that the "After" screenshot above shows the label for "Stick to the front page" wrapping, but the max-width at 75% instead solves that.

@laras126

laras126 Dec 4, 2017

Not necessary for the fix itself, but it balances out the label width to keep it from wrapping when the select is long and label short - see this comparison:

label-fix

Note that the "After" screenshot above shows the label for "Stick to the front page" wrapping, but the max-width at 75% instead solves that.

This comment has been minimized.

@aduth

aduth Dec 4, 2017

Member

Would this have been possible to achieve with white-space: nowrap?

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

@aduth

aduth Dec 4, 2017

Member

Would this have been possible to achieve with white-space: nowrap?

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

This comment has been minimized.

@laras126

laras126 Dec 4, 2017

For short label like this one, yes, but we wouldn't want to prevent wrapping for very long labels – with this solution, the label will wrap only when it starts to fill more than the max-width of 75%.

@laras126

laras126 Dec 4, 2017

For short label like this one, yes, but we wouldn't want to prevent wrapping for very long labels – with this solution, the label will wrap only when it starts to fill more than the max-width of 75%.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment