-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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.
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
Drag-and-drop is offset inside dialog if page is scrolled before opening dialog #14280
Comments
I have the same issue in 7.1.1 Angular Material. |
@crisbeto hi, it would be nice to hear something, it is very important, thx |
@kernyden If it helps you, as a temporary workaround, I forced
This way there won't be no offset in drag and drop, but opening a dialog will look a bit ugly. |
@pmilic021 no, it hasn't helped me, this thing reproduces not only on modal, it happens with lists have scroll. |
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
Try to add something like this to your global styles:
|
@radzix23 in actual version of cdk dnd we cant scroll with an active dnd effect :( - #13588 |
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
I have the same issue in ^7.3.7 Angular Material. |
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
…d scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
Any update on this issue? |
In Angular material 10 this is still an issue... Will it be fixed? |
Same issue, Temporary workaround... |
This is still an issue for me and none of the workarounds seem to work for me, any solution to this? |
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; } After 2 years and multiple reports is anyone reviewing? |
Hey all, I'm also having this issue. Made a stackblitz for reference: https://stackblitz.com/edit/drag-and-drop-inside-modal-bug Using |
…ocked scrolling We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
…ocked scrolling (#14806) We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes #14280. (cherry picked from commit 3e1de9d)
…ocked scrolling (#14806) We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes #14280.
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
…ocked scrolling (angular#14806) We use the `ViewportRuler` to determine how much a page has been scrolled in order to compensate for it in some of the `ClientRect`-related calculations. This breaks down when the drop list is inside a dialog with blocked scrolling, because scroll blocking works by offsetting the `html` node which in turn throws off the `ViewportRuler`. These changes switches to reading the values off the `window` which won't be thrown off. Fixes angular#14280.
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?
The text was updated successfully, but these errors were encountered: