md-select scaling problem

[nstohler]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The md-select control should be able to fill the full width and scale without breaking the layout. Especially on mobiles, where the effect of having too wide controls makes the page scrollable left/right for no real reason.

What is the current behavior?

it breaks the layout when resizing the window

What are the steps to reproduce?

http://embed.plnkr.co/eQ7gXj/

When scaling down from a larger window to a smaller one, the Material2 select control breaks the layout.

Example:

• start page at 1360px, shrink it to below 960px (the layout changes from row to column, the controls go beyond the green box).
• going even smaller, below 600px, same effect (here, the contents should shrink dynamically to fill the available screen width inside the green box).

Strange effect:

• set the window width to very small (300px), then RELOAD the plunkr preview window (not the browser)
• it still looks off a bit, but when increasing the window size now to around 310px, it looks like it's supposed to look
• from this state, increasing the window to SM, MD, LG, XL and then back again to something above 310px does not break the layout anymore!

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

I want to create a simple form (one input, three selects), where all the form controls should fill the available width inside of their parent div. Having three different sized selects above each other looks not nice.

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

"@angular/animations": "4.1.3",
"@angular/common": "^4.1.3",
"@angular/compiler": "^4.1.3",
"@angular/core": "^4.1.3",
"@angular/forms": "^4.1.3",
"@angular/http": "^4.1.3",
"@angular/material": "2.0.0-beta.5",
"@angular/platform-browser": "^4.1.3",
"@angular/platform-browser-dynamic": "^4.1.3",
"@angular/router": "^4.1.3",
"core-js": "^2.4.1",
"hammerjs": "2.0.8",
"lodash": "^4.17.4",
"rxjs": "^5.4.0",
"zone.js": "^0.8.10",
"@angular/flex-layout": "2.0.0-beta.8"

Is there anything else we should know?

[LilSebastian5000]

Agreed. It's especially awkward if you have a toggleable md-sidenav.

If you start the page with the sidenav closed, the width of the options panel keeps that initial width when the sidenav opens, causing an extremely wide option that goes off-screen.

Actually, sidenav doesn't seem to do well with flex layouts in general, but that's a different issue.

[johnrjj]

Had the same issue - traced it back to an already open issue: #4289
Applied the suggested fix and it resizes perfectly now.

[mmalerba]

I believe this should work now that mat-select lives inside mat-form-field

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