Closed tomrcht closed 7 years ago
Can you reproduce by forking this? https://plnkr.co/edit/MGU2aYrB3R1SkrTUCFEZ?p=preview
@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
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.
Thanks a lot, I'll see if I find a temporary workaround :)
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.
@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
Here you can see where to add that style.
https://github.com/liutian/push-admin/commit/a5ba4302bd67a8a7804ce13feb09c5522c516157
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.
+1
I fixed it like this
.cdk-global-scrollblock {
position: initial;
width: initial;
overflow: hidden;
}
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)
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.
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 modalWhat are the steps to reproduce?
position: fixed
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?
❤️