There is an unusual position style added to each grid-stack-item div when loading new widgets using addWidget.
I am using gridstack.js version 0.3.0 since 0.4.0 causes overlapping of widgets and an error that xxx.Top when dragging a widget to the topmost part of the div, so I followed what others suggested to downgrade to 0.3.0 and everything works fine, except for this issue.
I am using Google Chrome Version 70.0.3538.77 (Official Build) (64-bit)
I just used the normal way of adding the widgets
There is no other style applied to the div/element appended to the grid-stack parent
<div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide" data-gs-x="6" data-gs-y="7" data-gs-width="6" data-gs-height="4" style="position: relative;">
A position style is applied.
I checked the gridstack.css for the occurrence of relative position and it should only occur in one column mode which is not currently applied in my setup.
I traced the culprit back to jquery-ui. apparently the _setPositionRelative
method of the draggable class is called when the helper
is set to "original" which is the one by default. Now, every time a grid-item class is initialized to a draggable, an element position style is set to "relative" and causes the grid to be distorted unless it is removed and defaults to position: "absolute"
. The solution I implemented is to add an option for draggable: { helper: 'set to anything but "original"' }.
I am using the 0.2.5 version since it has no problems and the jquery version that the project is using is 1.11.
faced same issue, thanks for workaround
Not sure if this has been fixed in jQueryUI, but because it lives with them and because there's an easy workaround, I'm closing this up. Hopefully we'll get rid of the jQUI dependency soon!
might be worth adding a known JQ UI issue section to docs ?
Most helpful comment
I traced the culprit back to jquery-ui. apparently the
_setPositionRelative
method of the draggable class is called when thehelper
is set to "original" which is the one by default. Now, every time a grid-item class is initialized to a draggable, an element position style is set to "relative" and causes the grid to be distorted unless it is removed and defaults to position:"absolute"
. The solution I implemented is to add an option for draggable: { helper: 'set to anything but "original"' }.I am using the 0.2.5 version since it has no problems and the jquery version that the project is using is 1.11.