Material: md-select move body to the top and move overflow from body to html

[jcubic]

Actual Behavior:

• when I click on ng-select there are inline css added:

body {
   position: fixed;
   width: 100%;
   top: -400px;
}
html {
  overflow-y: scroll;
}

and md-backdrop element is added as first child of the body

• What is the expected behavior? there should be no such css modifications and select should be opened

I'm not able to recreate the issue using code pen, why this css is added?

I've fixed the issue by adding this css:

body {
    position: initial !important;
    top: initial !important;
    overflow: initial !important;
}
html {
    overflow: initial !important;
}

Angular Versions: *

• Angular Version: 1.5.6
• Angular Material Version: 1.1.0-rc.5 and 1.0.9

Additional Information:

• Browser Type: * Google Chrome
• Browser Version: * 51.0.2704.103
• OS: * Windows 7

[crisbeto]

That CSS is added in order to prevent scrolling @jcubic, however this shouldn't cause the page to jump, unless it's conflicting with some of your own CSS. Do you have an example where this is a problem?

[jcubic]

I don't see the issue anymore.

[Blair2004]

i rather like your fix @jcubic (y)

[danielpargas]

@jcubic Thank you, it was very helpful.

[pkeridactyl]

@jcubic Thank you! I've been fighting that for a while!

[imrai14]

@pkeridactyl Does the above CSS works for you? or u tried some other fix as well?

[pkeridactyl]

@imrai14 I tried a ton of things first, but the above worked for me.

[bryantee]

That fix is pretty helpful @jcubic, but now once top is removed after ng-select I get a jump back to the top of the page. Any advice on getting around this?

[sanjeevkse]

@jcubic Thank you so much. I have been fighting this for a long time. In fact got some blaming from my manager for this issue. Now its resolved with the fix. Me happy, manager happy, client happy. :)

[santutoshi]

it was so helpful works perfectly . Thank you !!

[maickBarreto]

Simple and perfect solution. Thanks!

I would like to leave a suggestion not to bug the $ mdDialog.
I am using the following way to avoid problems with $ mdDialog when you have html or body as a parent:

html:not(.md-dialog-is-showing),
body:not(.md-dialog-is-showing) {
   position: initial! important;
   top: initial! important;
   overflow: initial! important;
}

It's working very well for me!