Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modal opening moves body up #7390

Closed
tomrcht opened this issue Sep 28, 2017 · 11 comments
Closed

Modal opening moves body up #7390

tomrcht opened this issue Sep 28, 2017 · 11 comments
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@tomrcht
Copy link

tomrcht commented Sep 28, 2017 •
edited

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?

❤️
@willshowell
Copy link
Contributor

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

@tomrcht
Copy link
Author

tomrcht commented Sep 28, 2017 •
edited

@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
Copy link
Contributor

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
Copy link
Author

tomrcht commented Sep 28, 2017

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

@josephperrott josephperrott added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Sep 28, 2017
@crisbeto
Copy link
Member

crisbeto commented Sep 28, 2017 •
edited

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 willshowell mentioned this issue Oct 3, 2017
Closed
@AbakumovAlexandr
Copy link

@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
Copy link

@AbakumovAlexandr

Here you can see where to add that style.

liutian/light-push-admin@a5ba430

@dedeetech
Copy link

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
Copy link

speige commented Aug 7, 2018

+1

I fixed it like this

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

@aefox aefox mentioned this issue Mar 11, 2019
Closed
@rahul-y-dudhane
Copy link

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)

@vlapo vlapo mentioned this issue Jul 6, 2019
Closed
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@speige @ZgjimDida @crisbeto @willshowell @AbakumovAlexandr @tomrcht @josephperrott @rahul-y-dudhane @dedeetech