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.

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

Dragging node not activating scrolling inside container #2074

Open
TheAndre980 opened this issue Oct 12, 2022 · 10 comments
Open

Dragging node not activating scrolling inside container #2074

TheAndre980 opened this issue Oct 12, 2022 · 10 comments
Labels

Comments

@TheAndre980
Copy link

TheAndre980 commented Oct 12, 2022

Subject of the issue

I want to use gridstack in a small dialog on a angular project but the dialog does not scroll when needed.

Your environment

Project in angular 14
Gridstack version: gridstack 7.0.0 (also tested with 6.0.1)
Browser: Google chrome 105
OS: Windows 10

Steps to reproduce

Just drag a node on the edge of the container and then at the edge of the page.
https://jsfiddle.net/TheAndre98/54jdtsy2/

Update: use https://jsfiddle.net/adumesny/z0ra21c7/ (need float:true to see issue)

Expected behavior

Dragging node on the edge of container makes the container scroll

Actual behavior

Only scrolls with a node on the edges of page/window.

@adumesny
Copy link
Member

wonder if that works in v5 (h5 or jq version)... likely dup of #2032 #1905

@TheAndre980
Copy link
Author

TheAndre980 commented Oct 13, 2022

wonder if that works in v5 (h5 or jq version)... likely dup of #2032 #1905

I think it works on jq version.

I dont' think it's a duplicated since the container just doesn't scroll while on the edge of the container but on the edge of the page does...

@insilications
Copy link

Weeks ago I probably had this same problem. have you checked the overflow css style in your container/body? Using anything else other than auto broke the autoscrolling it seemed. I was using the latest es6 version (7.0~)

@TheAndre980
Copy link
Author

TheAndre980 commented Oct 21, 2022

Weeks ago I probably had this same problem. have you checked the overflow css style in your container/body? Using anything else other than auto broke the autoscrolling it seemed. I was using the latest es6 version (7.0~)

It's a dialog with a fixed height and the container has overflow:auto, normal scrolling works but like i said Auto-scrolling by dragging the item on the edge of the container does not work, only on the edge of the window

@adumesny
Copy link
Member

please run the v5 jquery version and let me know if auto scrolling works there - if it does then maybe I can make it work (I use different style of the dragged object to work with nested grid, unlike jq which always clipped incorrectly...

@TheAndre980
Copy link
Author

please run the v5 jquery version and let me know if auto scrolling works there - if it does then maybe I can make it work (I use different style of the dragged object to work with nested grid, unlike jq which always clipped incorrectly...

The auto-scrolling while dragging item works well in the v5 jquery version

@TheAndre980
Copy link
Author

@adumesny Is there any prediction to fix this in the near future ?

@adumesny
Copy link
Member

super busy at work, so only working on items people sponsors right now...

@TheAndre980
Copy link
Author

Thanks for the response, since this will take a while to fix i've made a quick workaround using the drag event and bringing the placeholder to view.
Here's the example:
https://jsfiddle.net/TheAndre98/0qsw4kbf/7/

@adumesny
Copy link
Member

Note: you need float:true to drag and scroll (or resize past down otherwise which does work in both case) to move them below.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants