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.

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

[SelectField][DropDownMenu] Prevent label from resizing parents #6200

Merged
merged 1 commit into from
Mar 8, 2017
Merged

[SelectField][DropDownMenu] Prevent label from resizing parents #6200

merged 1 commit into from
Mar 8, 2017

Conversation

JessThrysoee
Copy link

When the first selection is made in SelectField with no previous selection, it affects the size of the parent elements. This can be seen in the Nullable, Floating label, and ErrorText examples on http://www.material-ui.com/#/components/select-field

Here are side-by-side screenshots of the difference. Both the size of the box and the position of the underline has changed:
labelresizingparent

This can be prevented by positioning the label absolutely instead of relatively.

  • PR has tests / docs demo, and is linted.
  • Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
  • Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 1, 2017

I confirm the issue and that the PR is addressing it. Thanks.
My only concern now is. Is this the right way to fix it? I'm gonna have to look at the alternatives. Any idea?

@oliviertassinari oliviertassinari added component: select This is the name of the generic UI component, not the React module! bug 🐛 Something doesn't work labels Mar 1, 2017
@JessThrysoee
Copy link
Author

@oliviertassinari Did you come up with an alternative or any hints? Otherwise I'll take another look to see if we can avoid absolute positioning.

@oliviertassinari
Copy link
Member

@JessThrysoee I haven't found the time needed yet. I just want to be sure the solution is a correct one. Positioning can be tricky and introduce other issue.

Prevent the label from having zero height when empty.
@JessThrysoee
Copy link
Author

@oliviertassinari Good call, it turns out the label simply needs a height.

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

I can't control the side effect of that change without the visual regression test suite we have on the next branch. That's fixing the issue, hopefully, without introducing a regression.

@mbrookes mbrookes merged commit 3623682 into mui:master Mar 8, 2017
@oliviertassinari oliviertassinari changed the title [SelectField] [DropDownMenu] Prevent label from resizing parents [SelectField][DropDownMenu] Prevent label from resizing parents Mar 12, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants