gridstack.js icon indicating copy to clipboard operation
gridstack.js copied to clipboard

Dragging node not activating scrolling inside container

Open TheAndre980 opened this issue 2 years ago • 10 comments

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.

TheAndre980 avatar Oct 12 '22 09:10 TheAndre980

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

adumesny avatar Oct 12 '22 14:10 adumesny

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

TheAndre980 avatar Oct 13 '22 09:10 TheAndre980

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~)

insilications avatar Oct 21 '22 00:10 insilications

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

TheAndre980 avatar Oct 21 '22 12:10 TheAndre980

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

adumesny avatar Oct 22 '22 23:10 adumesny

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 avatar Oct 26 '22 09:10 TheAndre980

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

TheAndre980 avatar Nov 14 '22 10:11 TheAndre980

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

adumesny avatar Nov 14 '22 15:11 adumesny

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/

TheAndre980 avatar Nov 15 '22 14:11 TheAndre980

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

adumesny avatar Dec 31 '22 01:12 adumesny