Gridstack.js: style="position: relative;" is added to grid-stack-item div upon adding of widget

Created on 1 Nov 2018 · 4Comments · Source: gridstack/gridstack.js

Subject of the issue

There is an unusual position style added to each grid-stack-item div when loading new widgets using addWidget.

Your environment

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)

Steps to reproduce

I just used the normal way of adding the widgets

Expected behaviour

There is no other style applied to the div/element appended to the grid-stack parent

Actual behaviour

<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.

Source

73R3WY

Most helpful comment

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.

jeremy-ingenuity on 3 Nov 2018

👍3

All 4 comments

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.

jeremy-ingenuity on 3 Nov 2018

👍3

faced same issue, thanks for workaround

andreo-k on 13 Feb 2019

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!