md-select breaks the layout on focus

[jgoux]

Hello,
from the master, md-select seems to break the layout when it's focused. (Chrome)
In a layout row with two flex elements : (left column / right column)

EDIT : I made a codepen : http://codepen.io/jgx/pen/bNXeYr

I also created a sandbox to fork in order to ease the demo of issues (always up to date with the master branch), maybe it's something you could share in the contributing area of the readme ? : http://codepen.io/jgx/pen/JogKrQ

[paramburu]

+1
In my case it seems its adding some strange styles to a parent of the select (not necessarily the immediate parent).

overflow: hidden; position: fixed; width: 100%; padding-top: 16px; top: 88px;

Like it searches upstream for an md-content and then it adds those styles to the immediate child.

I thought it could be the following, but it doesn't seem to be:
https://github.com/angular/material/blob/master/src/components/select/select.js#L1014

Maybe here but it's looking inside not outside:
https://github.com/angular/material/blob/master/src/components/select/select.js#L98

Or maybe something related to the following:
https://github.com/angular/material/blob/master/src/components/select/select.js#L699

I couldn't pinpoint where those styles where added, if I manually disable those styles, it kind of solves the problem in my case. I would appreciate some help. Thanks.

[dohomi]

I updated my project with 0.9.0-rc1 and md-selectare messing up the layout on focus inside of md-dialog container. I assume its the same styling problems described above.

[jgoux]

For those like me who wants the last release before md-select breaks, in your package.json :

"angular-material": "git://github.com/angular/bower-material.git#v0.8.3-master-360e2b6"

[FDIM]

I can confirm this too, it gets even weirder if md-select is shown in a dialog.

[FDIM]

For anyone else looking for solution for this, you can use my fork where this behavior is removed.
"angular-material": "https://github.com/FDIM/bower-material.git#master",

[albertosantini]

@FDIM Indeed that change (removing disableScrollAround) fixes the issue: the select on focus doesn't break the dialog (and the layout is ok also for the case described in #2330).

Side effect:

TypeError: opts.restoreScroll is not a function
    at angular-material.js:8600
    at angular.js:14238
    at m.$get.m.$eval (angular.js:15465)
    at m.$get.m.$digest (angular.js:15276)
    at m.$get.m.$apply (angular.js:15570)
    at angular.js:17326
    at e (angular.js:5187)
    at angular.js:5459

[FDIM]

@albertosantini I've made another change - this time only set that option to false. Mentioned side effect doesn't happen anymore and layout remains correct. Thanks

[albertosantini]

@FDIM Confirmed. It is ok. Thanks a lot.

Any chance to set disableParentScroll: false for the select provider without modifying the legacy code? Like <md-select disable-parent-scroll="false" ...

[FDIM]

I wouldn't say that it is a legacy code, see 614630d

[rschmukler]

The latest code on master should resolve this issue. Please test it out and open up a new issue if not.

[jgoux]

My demo is automatically updated (few minutes after a push on bower-material).
It seems still broken for me : http://codepen.io/jgx/pen/bNXeYr

[rschmukler]

Just pushed an update again

[mckenzielong]

@rschmukler that codepen behavior changed again (still not quite expected behavior) and the doc demos are now behaving strangely. For example parts of the page are being cut off.

Edit: seems to be related to position fixed being set on the select menu's parent?

[jgoux]

@mckenzielong @rschmukler For me the codepen is perfect now ! 👍
I'm using rawgit so the change is taking a few minutes to happen, you can check the release tag in the source to be sure : https://rawgit.com/angular/bower-material/master/angular-material.min.js

[mckenzielong]

@jgoux newest rawgit is still broken here (made sure to clear cache):
Codepen

Docs

Chrome 42.0.2311.90 on Windows 7.

[gpopovic]

Still not fixed :/

[albertosantini]

The fix resolved one case, but not the dialog one.
Opening a new issue.

P.S. I found this ones #2350 and #2351

[SOftEngrAtta]

i am facing the same issue when my parent div position is fixed and apply scroll bar , and md select will be open top of the page , when i removed the position fixed the scroll bar will set his positon automatically ,
why md-select not set the top position auto when i applied parent position is fixe ?
Help me asap ...
parent div :

{
padding: 60px 20px 0;
overflow-y: scroll;
position: fixed;
left: 270px;
right: 23%;
top: 0;
bottom: 50px;
}