search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.34k stars 6.74k forks source link

Modal opening moves body up #7390

Closed tomrcht closed 7 years ago

tomrcht commented 7 years ago

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?

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

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

Tested on chrome 61 Win / Mac / Linux

Is there anything else we should know?

❤️

willshowell commented 7 years ago

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

tomrcht commented 7 years ago

@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

willshowell commented 7 years ago

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.

tomrcht commented 7 years ago

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

crisbeto commented 7 years ago

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.

AbakumovAlexandr commented 6 years ago

@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.

ZgjimDida commented 6 years ago

@AbakumovAlexandr

Here you can see where to add that style.

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

dedeetech commented 6 years ago

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.

speige commented 6 years ago

+1

I fixed it like this

.cdk-global-scrollblock {
    position: initial;
    width: initial;
    overflow: hidden;
}
rahul-y-dudhane commented 5 years ago

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)

angular-automatic-lock-bot[bot] commented 5 years ago

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.