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.

Sign up for GitHub

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

Jump to bottom

4.x: style="position: sticky" messing up Dragging #1704

Closed
Dodger77 opened this issue Apr 1, 2021 · 4 comments · Fixed by #1718
Closed

4.x: style="position: sticky" messing up Dragging #1704

Dodger77 opened this issue Apr 1, 2021 · 4 comments · Fixed by #1718
Labels
type:bug

Comments

@Dodger77
Copy link

Dodger77 commented Apr 1, 2021 •
edited

Subject of the issue

I am trying to make a lot of custom widgets to add to multiple grids. In order to access all of the widgets these stay in a sticky positioned <div> (position: fixed behaved the same way). Regardless of using float option true/false in the second grid it is not possible to position the dragged in widget under the other widgets.

Your environment

  • Version 4.0.3 tested in HTML5 and jQuery versions
  • Browser tested: Firefox (Linux), Chrome (Linux), Edge (Windows 10)

Steps to reproduce

https://codepen.io/Dodger77/pen/KKaaaJN (HTML5 version with float: true)
https://codepen.io/Dodger77/pen/qBRRvEm (jQuery version with float: false)

Expected behavior

Get new dragged in widgets positioned under the existing widgets.

Actual behavior

New dragged in widgets will always be on top of the second grid when dragged in.

Gridstack.js.float-and-sticky-2021-04-01_10.55.21.mp4
@Dodger77
Copy link
Author

Dodger77 commented Apr 1, 2021 •
edited

Here as a comparison the same code with gridstack.js 3.3.0 that is working:

https://codepen.io/Dodger77/pen/GRrrevw

@adumesny
Copy link
Member

adumesny commented Apr 4, 2021

I see the issue https://jsfiddle.net/adumesny/esyLr4hf/
looks like <div style="position: sticky; top: 0;"> is messing up the scroll bar computation for the second grid.

@adumesny adumesny changed the title Dragging items from sticky source into grid only on top of grid 4.x: style="position: sticky" messing up Dragging Apr 4, 2021
adumesny added a commit to adumesny/gridstack.js that referenced this issue Apr 11, 2021
@adumesny
scrollbar fix
5d88e37 
fix gridstack#1704
* introduced in 4.x, 'dropover' no longer checks for document.documentElement.scrollTop
since we call getBoundingClientRect() which handles being scrolled already.
adumesny added a commit to adumesny/gridstack.js that referenced this issue Apr 11, 2021
@adumesny
scrollbar fix
fd3f46f 
fix gridstack#1704
* introduced in 4.x, 'dropover' no longer checks for document.documentElement.scrollTop
since we call getBoundingClientRect() which handles being scrolled already.
@adumesny adumesny mentioned this issue Apr 11, 2021
Merged
3 tasks
@adumesny
Copy link
Member

fixed in next release. don't forget to donate if you find lib useful!

@adumesny adumesny mentioned this issue Apr 12, 2021
Merged
3 tasks
@Dodger77
Copy link
Author

Thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type:bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

scrollbar fix adumesny/gridstack.js
2 participants
@Dodger77 @adumesny