Components: .mat-select-value width causing issues

[Kyderman]

Bug, feature request, or proposal:

.mat-select-value has a width of 100%, when used inside a tab container, it pulls the the container to be full page width. I have 3 tabs which when switched between would always stay a consistent width using flex, with the new update, the last tab with a select now goes to full page width

What is the expected behavior?

Consistent sizing with other tabs.

What is the current behavior?

parent tab goes full width

What are the steps to reproduce?

Not got time for a plunker right now, sorry!

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

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

Latest

Is there anything else we should know?

[KevinGruber]

I can also say it is making problems in dialogs.

It makes dialogs expand completely to full width.
Interessting is that when i set a weird width of 91% it is almost normal again and it makes huge jumps closer to 100% so it is not linear.

BR,
Kevin

[josephperrott]

Please provide a reproduction in either Plunker or StackBlitz

[zisha]

Had the same issue until I realized that I hadn't enclosed it within a <mat-form-field>. Once I did that it behaved properly. Apparently this wasn't an issue with the previous version.

[gallagherrchris]

There is a similar issue with mat-dialog and mat-select event after enclosing inside mat-form-field

https://angular-cqilrf.stackblitz.io/
https://stackblitz.com/edit/angular-cqilrf

[jelbourn]

We haven't been able to reproduce this issue. Feel free to open a new issue if you are able to provide a reproduction via StackBlitz.

[lemoinem]

@jelbourn The stackblitz provided by @gallagherrchris reproduces exactly the issue.
This is still going on with the last version.

Any hope of telling us what we are doing wrong or reopening the issue?

[lemoinem]

I was trying to update @gallagherrchris Stackblitz to use the last version of Angular and Angular material (And open a new issue).
It appears the StackBlitz was not fitting the basic setup for angular material (which triggered weird CSS bugs).

Once this was solved, the Stackblitz was working correctly. By comparing the CSS with my own code, I noticed there was a .mat-form-field-infix { width: auto; } that has been added to workaround https://github.com/angular/material2/pull/7083#issuecomment-344584345

I hope this might help anyone still seeing this issue.

[angular-automatic-lock-bot[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._}