mat-select within "boxed" form-field, wrong allignment of dropdown icon

[richardsengers]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Better allignment of dropdown icon

What is the current behavior?

Dropdown icon is centered in the .mat-form-field-wrapper

What are the steps to reproduce?

https://stackblitz.com/edit/angular-z9ehue?file=app/select-overview-example.html

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6
Chrome 66

Is there anything else we should know?

According to the material specs the dropdown icon should be centered based on the text

Currently it looks like this

[richardsengers]

Another example of a dropdown from the docs

(resource: https://material.io/design/components/menus.html#exposed-dropdown-menu)

[crisbeto]

This seems more like an inconsistency between how the label is aligned when using the placeholder versus using the mat-label element. Here's a comparison between the two:

[Ploppy3]

@crisbeto So which one is the wrong one? It seems to me that the mat-label is ok. I therefore switched to mat-label.

I noticed something else, as you can see in the following stackblitz example, there is a problem with the mat-select component.

When no option is selected the mat-label is positioned properly, but when I select one, the option is lower than it should.

https://stackblitz.com/edit/angular-material2-issue-mmmd9e?file=app%2Fapp.component.html

Should I open a new issue or is it related?

[crisbeto]

I'd say that it's the same issue. Both the placeholder and the value are rendered inside the same element.

[mmalerba]

We need to do a pass and make sure our form field styles are in line with the latest spec. We based our implementation off a non-final version of the spec before it was released. Tracking in #11513

[angular-automatic-lock-bot]

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.}