(md-select) with placeholder changes size when selected

[benb7760]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

An md-select with a selection should be the same size as with no selection

What is the current behavior?

This is true for an md-select with no placeholder, but when I provide a placeholder, the control sizes differently

As a side note - can anybody comment on why the second controls placeholder overlaps with the control above, when selected? Is this a bug which should be filed separately?

What are the steps to reproduce?

Select a value in both of the lists, and you'll see an offset

http://plnkr.co/edit/KdHQWMFXj2hEFWWFRJyq?p=preview

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

Reproduced in Chrome and Safari latest (not tried other browsers)

[dahaupt]

@benb7760 To answer your second question: This issue is already known and will be fixed soon with #2309.

[dahaupt]

This is because of this method in select.ts:

private _setValueWidth() {
    this._selectedValueWidth =  this._triggerWidth - 13;
  }

When removing this line it works fine, but I'm not sure about the side effects of that.

EDIT:
The comment above the method says "Must set the width of the selected option's value [...]", but the width is added to <span class="mat-select-placeholder"> instead of <span class="mat-select-value"> which would fit to the comment. I'm not sure if this is needed anymore, because without setting it explicitly it works fine at least in Chrome.

[dahaupt]

To fix this temporary you can use:

span.mat-select-placeholder.mat-floating-placeholder {
  width: auto !important;
}

[jelbourn]

Tracking via #2124

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