Components: Modal opening moves body up

Created on 28 Sep 2017 · 11Comments · Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Opening a modal does not moves body up.

What is the current behavior?

A negative top is applied to the body, causing elements to go up. This comes back to normal when closing the modal

What are the steps to reproduce?

Create an element with position: fixed
Scroll down your page so that you are not at the top
Open the modal

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

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

Angular core : 4.3.1
Angular material : 2.0.0-beta.8
TypeScript : 2.3.4

Tested on chrome 61
Win / Mac / Linux

Is there anything else we should know?

❤️

Source

tomrcht

Most helpful comment

I fixed it like this

.cdk-global-scrollblock {
    position: initial;
    width: initial;
    overflow: hidden;
}

speige on 7 Aug 2018

👍5

All 11 comments

Can you reproduce by forking this? https://plnkr.co/edit/MGU2aYrB3R1SkrTUCFEZ?p=preview

willshowell on 28 Sep 2017

@willshowell

Sure, never used plunker so I'm not sure if I did the right thing, but here you go : https://plnkr.co/edit/EuKloJ9RX6VlcIizaJCR?p=preview

tomrcht on 28 Sep 2017

Thanks! Looks like this is due to the scroll blocking strategy that the dialog uses. It calculates the scrolltop and fixes the <html> element there until the dialog is closed.

If you care where the long gray bar is positioned vertically, then I think you should be specifying a top or bottom css property (which fixes it). That said, maybe @crisbeto should take a look.

willshowell on 28 Sep 2017

Thanks a lot, I'll see if I find a temporary workaround :)

tomrcht on 28 Sep 2017

As @willshowell mentioned, it's because you haven't set a top or bottom value. I'm not sure we can do too much to solve it automatically on Material's side without sacrificing flexibility or performance. Closing for now but we can continue the discussion in case a better approach comes up.

crisbeto on 28 Sep 2017

@willshowell @crisbeto : Could you specify which element we need to add top or bottom CSS property to?
I see that style="left: 0px; top: 0px;" gets added to the html element automatically, but vertical scroll bar still shows up when a dialog opens.

AbakumovAlexandr on 1 Dec 2017

👍1

@AbakumovAlexandr

Here you can see where to add that style.

https://github.com/liutian/push-admin/commit/a5ba4302bd67a8a7804ce13feb09c5522c516157

ZgjimDida on 19 Jan 2018

When I debug what I found was cdk-global-scrollback is the class which is making the header and scroll-buttons to disapper. So In that case I just removed calling that class from that particular component.

Eg: document.getElementsByTagName('html')[0].classList.remove('cdk-global-scrollblock');

Adding that code should fix it.

dedeepyachowdary on 10 May 2018

I fixed it like this

.cdk-global-scrollblock {
    position: initial;
    width: initial;
    overflow: hidden;
}

speige on 7 Aug 2018

👍5

I faced same problem.
Following solution work for me,

.cdk-global-scrollblock{ position: static !important; width: initial !important; overflow-y: inherit !important; }
Put it into your global css or in dialog components loacl css (you have to enable view encapsulation in case of local)