md-select broken in build when inside md-content element

[hodeyp]

looks like an md-content with a layout attribute causes the select to do weird things...

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

[epelc]

+1 I definitely can't use 0.9.0-rc1 until this is fixed.

I looked into it a bit and It seems the following styles are added to the first div within md-content. Removing them fixes md-content being expanding horizontally causing a scroll bar.

For formatting's sake here they are in text

  overflow: hidden;
  position: fixed;
  width: 100%;
  padding-top: 0px;
  top: 64px;

[epelc]

The select positioning and width are fine if you do not have any layout attibutes on or between your md-content and your md-select. However it still adds the css in my above comment which breaks md-contents width.

[epelc]

This also really breaks md-select if you use it in a dialog.

[loykianos]

I seem to be having the same problem, even without any layout attributes.
The z-index is acting a little bit funny.

[rschmukler]

@epelc have you tested on master yet? If not, can you give it a go and see if it's resolved.

[hodeyp]

this is definitely still an issue on master

[epelc]

@rschmukler Just checked same problem. I'll be on gitter if you want any help debugging

[rschmukler]

@hodeyp and @epelc working on it now, should have something soon. Sorry for the bug. Disabling scrolling in a consistent, cross browser compatible way, is bit tricky.

[hodeyp]

@rschmukler hate to disappoint but still not working - my original plunker above still suffers from disappearing elements when the select is shown.

[loykianos]

I also tried to update and I still have weird template reactions when opening the selectbox. See bellow.

Before:

After:

[epelc]

Try using master so you get @rschmukler's fix

[loykianos]

I am, and I updated a few hours ago. Tried again just now, same result.

[ThomasBurleson]

@loykianos - Please provide a CodePen or Plunkr that demonstrates this issue.
@epelc, @hodeyp - have the fixes in #master resolved this issues for you?

[loykianos]

There you go, http://plnkr.co/edit/j8RqpRtNnzAyKjX3DnC8?p=preview

Still having the same problem with no extra CSS added.

[epelc]

@ThomasBurleson This fixed all of my problems besides one but I found a work around.

I had a class which adding padding-left/right: 5% on my md-content for larger devices but it caused my fab button to be cut off graphically whenever I opened a select. I fixed it by adding margin-left/right: 5% to my md-card's instead which gave me the same padding/margin effect.

[hodeyp]

sorry, still not working for me, and the plunker still shows the same issue.

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

[epelc]

@ThomasBurleson I just noticed $window isn't firing resize events after I open and close an md-select.

edit - Well it seems to break any listeners I had on it. But if I change pages my listener works again until I open another select.

[FelAmine]

I'm having this issue with version 0.9.0-rc1 but not with 0.8.3.

[jsteenkamp]

Broken in dialog on #master. Removing md-content provides workaround but is contrary to md-dialog docs that say you should use md-content.

[Tyrannmisu]

Master is still broken for me in Firefox and chrome, it breaks the layout when used in dialogues and also breaks $window.resize listeners.

The Layout was okay in master-f3c113c (but it still broke the listeners) when using chrome, now its broken in Firefox and Chrome (even though the results are a bit different.)

In Firefox the elements in the dialogue are all over the place (outside the dialogue) when opening the select and the actual select is above the dialogue. In Chrome the dialogue becomes empty and the select is shown on the right side outside of the dialogue.

0.8.3 worked mostly fine, only Firefox showed some scrollbars on the body while opening the md-select.

[albertosantini]

Another codepen example not working by @Alexandre-io is the following one: http://codepen.io/Alexandre-io/pen/WbVWKP

Tested with v0.9.0-rc1-master-aff50d5 and it doesn't work.
#2350 (comment)

[rschmukler]

Thank you everyone for the detailed examples. Looking into it and getting something ASAP!

[epelc]

@rschmukler I just noticed the new way you handle disabling the side bar causes content to expand the size of the scrollbar while the select is open. I think it needs margin-right to counter act this if you open the select within md-content(and possibly in dialogs but I haven't checked). Also this happens because the scrollbar is removed when the select is open now.

[rschmukler]

@epelc it should be wrapping the outer element with an overflow-y: scroll which should create a scroll bar on the outer element. What browser / OS are you using?

[hodeyp]

@rschmukler no doesn't work in firefox either.. tells me the issue with with angular-material.js:890

[epelc]

@rschmukler I just checked with latest master and the md-content being cut off still happens.

[rschmukler]

@hodeyp fixed, thanks!

[rschmukler]

@albertosantini Does the page scroll when the select is closed? ie. is it longer than the window size? Or is there no scroll bar on that page?

[rschmukler]

@epelc can you give a plunker of the cutting issue you're experiencing.

[albertosantini]

@rschmukler The page doesn't scroll.

It is not longer than the window size.
When I close the select, the scrollbar disappears.

In my css I have

body {
    overflow-y: hidden;
}

[epelc]

@rschmukler It seems to be caused by having layout="column" on bother body and md-content. Removing it from either one seems to fix it.

Here's a plunker
http://plnkr.co/edit/44McFB0VzbTSGSfbKjAy?p=preview

I guess it's not too important it's an easy workaround depending on how your app is layed out. Anyways I can live with it.

[rschmukler]

@albertosantini thanks for helping me find that one. Fixed by b9ee612.

@epelc taking a look now!

[rschmukler]

@epelc Looks like it might be a rawgit caching issue. The nested column example (with the code from the plunker you posted) looks like it's working for me on my locally built version. Let me know if this isn't the case for you.

[epelc]

@rschmukler Did you scroll down then open the select? I have disable cache on in chrome. If not can you post your locally built one so I can add it to the plunker?

[rschmukler]

@epelc just tried it with locally built on plunker. Oddly enough it breaks... But it doesn't break when I test it locally with the same code that breaks the plunker. I'll poke around a bit more.

[albertosantini]

@rschmukler Job done! :) All fixed (with Chrome) here. Thanks a lot.

[Tyrannmisu]

@rschmukler : Works fine now in Firefox and chrome, thanks ! :)

[jgoux]

Almost there !
I have still a bug (tested on Firefox and Chrome) when I have multiple md-content with one in scroll mode :

As you can see all the content of the scrollable md-content is going out of its parent.

I have reproduced the issue here : http://codepen.io/jgx/pen/QbWjNE

[ayastreb]

There is a strange thing, which makes my Chrome freezing and crashing, if I surround md-select with <div> tag.
This example works ok - http://codepen.io/anon/pen/ZGEQGM
And this one makes the chrome freeze when I click on md-select - http://codepen.io/anon/pen/vOYLNL
Same happens on Mac Safari.
It only happens if the md-select is inside <form> tag - if I remove form - it works ok.
Is it reproduced for anyone else?

[epelc]

@ayastreb I can confirm that on chrome 42.0.2311.90 m windows 10 preview

[jgoux]

@ayastreb Wow me too. I assume there is an infinite loop somewhere. oO

[Tyrannmisu]

Just realised that the select seems to break my $window.resize listeners with 0.9.0rc2 again.
Not sure if it's still broken or was fixed before :-/ .
Using them in a dialogue with md-content.
The issue is present in Firefox and chrome.

After a a select is opened listeners like this don't fire anymore:

angular.element($window).bind('resize', function () {
    //...
});

[epelc]

@Tyrannmisu It wasn't fixed yet. It is broken in 0.9.0-rc1 and rc2

[Tyrannmisu]

@epelc good to now, same thing in latest master by the way.

[rschmukler]

@ayastreb I have fixed the loop issue you mentioned, it's fixed on master. Looking into other issues now. Once they are resolved I am going to close this issue and potentially re-create separate issues on github as this has become a bit of a catch-all for select issues, making it harder for me to prioritize

[ayastreb]

@rschmukler thank you! Fixed now.

[rschmukler]

Disable scroll is now implemented via a virtual scroller, which should help. @epelc your clipping issue should be resolved with the latest, as well as @jgoux 's layout issue.

I'm closing this issue to help with tracking. Please create a new issue for any new/remaining layout bugs.

Thank you again everyone for helping me track down all of these use cases.