Widgets overlap

[ygalanter]

Subject of the issue

When widgets are resized moved - they could overlap each other

Your environment

• version of gridstack.js: 0.4
• Chrome for Windows v67

Steps to reproduce

Attached screenshot with issue. Using standard Gridstack setup

Expected behaviour

Dragged/resized widgets should push others out of the way

Actual behaviour

[mdehaan51]

Did you ever find a fix for this issue?

[IntarsVascenkovs]

I have same problem. Widgets overlap each other.

I tried to create my own and copy from gridstack Demo page, result is same.

[samisin]

I get this issue when I drag a new widget to a grid. The new widget can be placed over other widgets, while the widgets that were loaded from start in the grid behave correctly. This happens with 0.4.0, but if I revert to 0.2.7-dev which is used in the Two grid demo (http://gridstackjs.com/demo/two.html), then it behaves as it should, i.e. widgets move when the new widget is placed on top.

[samisin]

I can confirm now it also happens with current widgets in the grid, but under certain conditions, which are that when a widget appears later on in the code, then that widget can be placed over a widget earlier on in the code. I.e. I have three widgets (a, b, c) in that order in my code on the grid. When a is dragged over b and c, then b and c are changing position. When b is dragged, a is not changing position, but c is. When c is dragged, a and b are not changing position.

[slaterjack]

Hi there, I have been having this same issue giving me grief when I was using grids with custom content. To fix the issue I rolled back my version to 0.3.

Hope this helps!

[adamtaylor13]

Any update on this? I'm having this issue and I can't seem to isolate what the problem is. My widgets end up overlapping each other and won't push other widgets down or to the side. I doesn't seem like expected behavior, and I don't get this problem on any demo pages.

I can confirm: When I downgraded to 0.3.0 it starts functioning mostly as expected.

[ygalanter]

Can confirm too, downgrading to 0.3 I am getting the same behavior as on main GridstackJS demo page. But was getting overlapping and chaotic unpredictable movement both in 0.4 and 1.0dev. Any update on fix making it into 1.0 release?

[TheCutter]

I think the bug was introduced by this commit:
ae6daac

If you change the line .take(i) with
.filter(function (o) { return o !== n})
it is working again.

[cheekee]

There are two ".take (i)" line to fix it at gridstack.js 1.0.0-dev version.

[radiolips]

I know that there are weird problems in a multi-grid scenario, but could someone let me know how I can replicate the issue with just one grid? I haven't had overlapping widgets, but if several of you are, there's certainly an issue. Let me know some more information and I'll take a look.

Here's an example I took it from an other issue to try in my solution and when changing between 0.3.0 and 0.4.0 version there is a difference in the dragging functionality.

Dragging B over A overlaps in 0.4.0 the same action in 0.3.0 moves A underneath B.

<div id="myGrid" class="grid-stack" style="border: 1px solid green">
    <div class="grid-stack-item"
         data-gs-x="0" data-gs-y="0"
         data-gs-width="4" data-gs-height="2">
        <div class="grid-stack-item-content" style="background: red">A</div>
    </div>
    <div class="grid-stack-item"
         data-gs-x="4" data-gs-y="0"
         data-gs-width="4" data-gs-height="4">
        <div class="grid-stack-item-content" style="background: blue">B</div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('#myGrid').gridstack();
    });
</script>

Code copied from here :
#743 (comment)

[TheCutter]

I think the bug was introduced by this commit:
ae6daac

If you change the line .take(i) with
.filter(function (o) { return o !== n})
it is working again.

As I wrote above, the problem was introduced by the commit "Avoid collision check of node with itself".
A simple take will not always work if the order of the nodes is not "correct", so some nodes are missed out to detect collisions. If the lines are changed to .filter(function (o) { return o !== n}) all nodes except the node itself are checked for collisions.

[adumesny]

@kenneylo2113 I copied your example into two.html and made sure to use gridstack 0.4.0 (yarn add gridstach and copied the files over my dist folder) and I cannot reproduce this moving B over A on Chrome,FF,Edge windows10.

We will be release 0.5.0 soon so maybe you guys can try if still reproduce, but neither @dweiss nor I can see this issue. Maybe a video clip if there is a trick to make it happen ?

[sello-rex]

Hey Guys,

I'm having the same issue, using cdn 0.4.0 now downgrading to 0.3.0, fixes this.

Here's a video showing what is happening.
https://www.mediafire.com/file/71lobdycbbjco7t/new.mp4/file