Drag-and-drop is offset inside dialog if page is scrolled before opening dialog

[pmilic021]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

After scrolling the page and then opening dialog, any drag-and-drop list in the dialog component should work properly.

What is the current behavior?

The drag-and-drop list's drop placeholder is offset aprox by the amount scrolled before opening the dialog.

What are the steps to reproduce?

I came across an example of this while looking for possible solution prior to making this issue:
@cisasteelersfan made it in one other ticket (that issue is not the same as this one!)
#13508 (comment)

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

It is pretty common use case to have drag-and-drop in a dialog

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

7.0.2

Is there anything else we should know?

[belerofont]

I have the same issue in 7.1.1 Angular Material.

[denkerny]

@crisbeto hi, it would be nice to hear something, it is very important, thx

[pmilic021]

@kernyden If it helps you, as a temporary workaround, I forced top to be 0 (usually it is set to the -scrollOffset before opening dialog):

.cdk-global-scrollblock {
    top: 0 !important;
}

This way there won't be no offset in drag and drop, but opening a dialog will look a bit ugly.

[denkerny]

@pmilic021 no, it hasn't helped me, this thing reproduces not only on modal, it happens with lists have scroll.

[ghost]

Try to add something like this to your global styles:

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

[denkerny]

@radzix23 in actual version of cdk dnd we cant scroll with an active dnd effect :( - #13588

[linjie0928]

I have the same issue in ^7.3.7 Angular Material.

[hijamoya]

Any update on this issue?

[BlindDespair]

In Angular material 10 this is still an issue... Will it be fixed?

[Art2058]

Same issue,
Angular material 10

Temporary workaround...
.cdk-global-scrollblock { top: 0 !important; }

[BrettKessler]

This is still an issue for me and none of the workarounds seem to work for me, any solution to this?

[tameyer1]

We just ran into this bug. Same symptoms - drag n drop in a dialog. Offsets are way off when dragging if page has been scrolled. Works correctly if page is not scrolled.

This does not work: .cdk-global-scrollblock { top: 0 !important; }
This works but will be deprecated and against our internal policy.
::ng-deep html.cdk-global-scrollblock {
top: 0px !important;
}

After 2 years and multiple reports is anyone reviewing?

[condericson]

Hey all, I'm also having this issue.

Made a stackblitz for reference: https://stackblitz.com/edit/drag-and-drop-inside-modal-bug

Using .cdk-global-scrollblock { top: 0 !important; } in my project's global styling worked for me.

[angular-automatic-lock-bot]

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