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

TextField labels centered when focused in beta.45 #11283

Closed
1 task done
gpoitch opened this issue May 8, 2018 · 3 comments
Closed
1 task done

TextField labels centered when focused in beta.45 #11283

gpoitch opened this issue May 8, 2018 · 3 comments
Assignees
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@gpoitch
Copy link

gpoitch commented May 8, 2018

When Textfields are in a container that has text-align: center, their labels become centered when you focus them as of beta.45. This didn't occur in previous versions.

screen shot 2018-05-08 at 3 36 56 pm

  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The labels' alignment should stay the same regardless of focus state. Ideally (and previously) they should always be left aligned. If inheriting the parent's text alignment was a purposeful change in beta.45, it should respect it in both focused and unfocused states.

Current Behavior

The labels become centered only when focused.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/x7wp3kx634

  1. Focus a textfield

Context

Your Environment

Tech Version
Material-UI next
React 16.3.2
browser Safari 11, Chrome 66
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process. labels May 8, 2018
@oliviertassinari
Copy link
Member

oliviertassinari commented May 8, 2018

@gpoitch Thanks for raising the issue! The "only when centered" thing comes from #11215 by @pandaiolo.

I think that we should reset the text-align on the label for consistency with the input and make the label fit the container (width: 100%) when not shrinked (not focused and empty).
Do you want to work on that? :)

@pandaiolo
Copy link
Contributor

OT @oliviertassinari I understood your concerns about this seemingly little change, but I really thought it would have no impact. This is enlightening 😄

@pandaiolo
Copy link
Contributor

@oliviertassinari @gpoitch if we're not reverting #11215 (rel #1128 ) I can also get this one fixed, let me know.

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: text field This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

No branches or pull requests

3 participants