Skip to content

Commit fd3f46f

Browse files
adumesnyadumesny
committed
scrollbar fix
fix #1704 * introduced in 4.x, 'dropover' no longer checks for document.documentElement.scrollTop since we call getBoundingClientRect() which handles being scrolled already.
1 parent 300b335 commit fd3f46f

File tree

3 files changed

+59
-1
lines changed

3 files changed

+59
-1
lines changed

‎doc/CHANGES.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@ Change log
5555
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
5656
## 4.1.0-dev
5757

58+
- fix [#1704](https://github.com/gridstack/gridstack.js/issues/1704) scrollbar fix broken in 4.x
59+
5860
## 4.1.0 (2021-4-7)
5961

6062
- fix [#219](https://github.com/gridstack/gridstack.js/issues/219) **fixing another 6 years old request** we now automatically insert extra rows

‎spec/e2e/html/1704_scroll_bar.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="../../../demo/demo.css"/>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"></link>
9+
<script src="../../../dist/gridstack-h5.js"></script>
10+
<style>
11+
#trash {
12+
background: rgba(255, 0, 0, 0.4);
13+
}
14+
.two {
15+
background: lavender;
16+
}
17+
</style>
18+
19+
</head>
20+
<body>
21+
<div class="container-fluid">
22+
<div class="row">
23+
<div class="col-md-2 d-none d-md-block" style="position: relative;">
24+
<div style="position: sticky; top: 0;">
25+
<div id="trash" style="padding: 5px; margin-bottom: 15px;" class="text-center">remove</div>
26+
<div class="newWidget grid-stack-item" gs-min-w="3">
27+
<div class="grid-stack-item-content" style="padding: 5px;">add</div>
28+
</div>
29+
</div>
30+
</div>
31+
<div class="col-sm-12 col-md-10">
32+
<div class="grid-stack"></div>
33+
<div class="grid-stack two"></div>
34+
</div>
35+
</div>
36+
<script type="text/javascript">
37+
let grids = GridStack.initAll({
38+
acceptWidgets: true,
39+
dragIn: ".newWidget", // class that can be dragged from outside
40+
dragOut: false,
41+
dragInOptions: {
42+
revert: "invalid",
43+
scroll: false,
44+
appendTo: "body",
45+
helper: "clone"
46+
},
47+
removable: "#trash", // drag-out delete class
48+
removeTimeout: 100,
49+
float: true,
50+
row: 3,
51+
});
52+
// let items = [{x: 0, y: 0, content: "0"}];
53+
// grids.forEach(grid => grid.load(items));
54+
</script>
55+
</body>
56+
</html>

‎src/gridstack-dd.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,7 +161,7 @@ GridStack.prototype._setupAcceptWidget = function(): GridStack {
161161

162162
// get grid screen coordinates and cell dimensions
163163
let box = this.el.getBoundingClientRect();
164-
gridPos = {top: box.top + document.documentElement.scrollTop, left: box.left};
164+
gridPos = {top: box.top, left: box.left};
165165
cellWidth = this.cellWidth();
166166
cellHeight = this.getCellHeight(true);
167167

0 commit comments

Comments
 (0)