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

Input container / form field font size does not adhere to material design spec #6455

Closed
gtranter opened this issue Aug 14, 2017 · 5 comments
Closed

Comments

@gtranter
Copy link

https://github.com/angular/material2/blob/85a6fff17a1f3ccbbda1f555ba32868c95b16b25/src/lib/form-field/_form-field-theme.scss#L146

The size is set to inherit, but the spec requires size 16. Inherit is wrong.

@gtranter
Copy link
Author

Apparently this was addressed by #5154 / #5262 but not fully fixed (the root cause was addressed but not the root problem - font size).

@michahell
Copy link

aha... so this is probably why md-selects are sized 16px and form field text inputs are... whatever sized

@jelbourn
Copy link
Member

We intentionally make the input more flexible than the spec calls for (allowing the input to use its inherited font-size).

@gtranter
Copy link
Author

gtranter commented Aug 17, 2017

Why? I don't understand why it needs to be "more flexible." I can easily override the style if I want flexibility. I'd love to know the reasoning behind that for my own education. Do you do this with any other components? Disappointing that in some cases the spec is adhered to with great rigidity and no consideration for "flexibility" whereas here it is considered unimportant.

I though this would be an obvious one but I guess I was wrong. I suspect this is an ad-hoc arbitrary decision that no-one really thought through, so let me state the case a little more clearly. This is less flexible because now I have to override the style if I happen to have my input in a P or DIV with .mat-typography applied - which is generally always. I apply .mat-typography at the root of my page which is what Angular Material recommends (I love this feature). So every input in every DIV or P now has font size 13 with (as a result) a barely visibly 9.75px label and hint. (You should try this and see how bad it looks.) And there is no class defined so that I can easily say <md-input-container class="mat-input-typography"> or similar to have it at spec size - because you made .mat-input font-size inherit. Please, for the love of bacon, explain to me how this is more "flexible???"

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants