You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Can't easily drag widgets below widgets on the bottom border of a grid #219
Gridster pops a few blank rows at the bottom of a grid, making it easy for your drag to scroll the window downward. When a gridstack grid has filled the window, it is impossible to drag a widget below any widget that touches the bottom border. Turning on float causes drags to add extra rows as needed. With float off, it could do the same then let the block fall upward into position.
Just wrap your gridstack DIV inside a parent DIV, then give the parent DIV a padding-bottom >= the stackgrid row height.
So when you move a widget down you always have extra space and stackgrid will add a new row.
Everything work well except this case but it's very important with user experience, so uncomfortable when drag and drop item from sidebar to main grid (drag item from sidebar below the other items in main grid).
we now automatically insert extra rows when dragging an item at the bottom below others to make it easier to insert below, while allowing objects to be easily removed (not colliding with others)
Activity
svdb commentedon Sep 28, 2015
Just wrap your gridstack DIV inside a parent DIV, then give the parent DIV a padding-bottom >= the stackgrid row height.
So when you move a widget down you always have extra space and stackgrid will add a new row.
radiolips commentedon Feb 19, 2016
@derekm did adding padding work? It should. I'm closing this issue, but please feel free to reopen it if you still have a problem.
frankadrian commentedon Mar 30, 2017
Hey @radiolips, This does not seem to work for items that are being dragged from another grid. I will try create a example for this!
frankadrian commentedon Mar 30, 2017
The behaviour can be seen here: https://gridstackjs.com/demo/two.html
Try dragging an item from one grid below an item in the other grid!
trongletps commentedon May 8, 2017
I had same issue with @frankadrian. When I set float equal false, to difficultly to drag the widget below one from the grid to the another grid.
trongletps commentedon May 11, 2017
Everything work well except this case but it's very important with user experience, so uncomfortable when drag and drop item from sidebar to main grid (drag item from sidebar below the other items in main grid).
stevenliebregt commentedon Feb 22, 2019
What is the status off this issue?
adumesny commentedon Dec 22, 2019
see #1094 as well
adumesny commentedon Dec 13, 2020
this might get fixed along #1001 as we will add an extra temporary row the moved/resized item is at the bottom.
adumesny commentedon Jan 3, 2021
it is now possible in v3 HTML5 drag version (we get auto-scroll) but a little rough so keeping it open to address side effects shown below:
20210103_092419.mp4
insert extra rows, insert below
adumesny commentedon Apr 4, 2021
should work a lot better now in next release.
we now automatically insert extra rows when dragging an item at the bottom below others to make it easier to insert below, while allowing objects to be easily removed (not colliding with others)
20210404_081138.mp4