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

Select overflows bounds of viewport on iOS #112

Closed
traviskaufman opened this issue Dec 16, 2016 · 0 comments · Fixed by #122
Closed

Select overflows bounds of viewport on iOS #112

traviskaufman opened this issue Dec 16, 2016 · 0 comments · Fixed by #122
Assignees
@traviskaufman
Labels
backlog bug

Comments

@traviskaufman
Copy link
Contributor

What MDC-Web Version are you using?

Latest (0.1.1)

What browser(s) is this bug affecting?

iOS (Chrome)

What OS are you using?

iOS v10.1.1 (but affects all OSs)

What are the steps to reproduce the bug?

  1. Ensure
  2. Navigate to http://material-components-web.appspot.com/select.html
  3. Observe the select elements

What is the expected behavior?

The entire select element fits within the bounds of the screen

What is the actual behavior?

The select overflows the bounds of the screen.

Any other information you believe would be useful?

This seems to happen because we don't put any constraints on the width of the select when we calculate it. We should consider putting a max-width: 100% style on the element and then truncating the text with an ellipsis, or something similar.
@traviskaufman traviskaufman self-assigned this Dec 16, 2016
traviskaufman added a commit that referenced this issue Dec 16, 2016
@traviskaufman
fix(select): Prevent overflow on smaller screens
ea333b9 
- Set max-width of component to 100% - the size of the padding added to
  accomodate the drop-down arrow
- Truncate overflowing selected text, similar to a normal <select>
  element

[Delivers #136281135]
Resolves #112
traviskaufman added a commit that referenced this issue Dec 16, 2016
@traviskaufman
fix(select): Prevent overflow on smaller screens
a43022c 
- Set max-width of component to 100% - the size of the padding added to
  accomodate the drop-down arrow
- Truncate overflowing selected text, similar to a normal <select>
  element
- Adds "ignore: local" for scss/dollar-variable-pattern to stylelint
  config so local Sass vars don't have to be prefixed
- Disallows the legacy "md-" prefix that was allowed in our stylelint
  config

[Delivers #136281135]
Resolves #112
@traviskaufman traviskaufman mentioned this issue Dec 16, 2016
Merged
traviskaufman added a commit that referenced this issue Dec 16, 2016
@traviskaufman
fix(select): Prevent overflow on smaller screens (#122)
fa926db 
- Set max-width of component to 100% - the size of the padding added to
  accomodate the drop-down arrow
- Truncate overflowing selected text, similar to a normal <select>
  element
- Adds "ignore: local" for scss/dollar-variable-pattern to stylelint
  config so local Sass vars don't have to be prefixed
- Disallows the legacy "md-" prefix that was allowed in our stylelint
  config

[Delivers #136281135]
Resolves #112
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@traviskaufman traviskaufman

Labels
backlog bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(select): Prevent overflow on smaller screens material-components/material-components-web
1 participant
@traviskaufman