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.

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

style="position: relative;" is added to grid-stack-item div upon adding of widget #950

Closed
73R3WY opened this issue Nov 1, 2018 · 4 comments

Comments

@73R3WY
Copy link

73R3WY commented Nov 1, 2018

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.

@jeremy-ingenuity
Copy link

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.

@andreo-k
Copy link

faced same issue, thanks for workaround

@radiolips
Copy link
Member

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!

@adumesny
Copy link
Member

might be worth adding a known JQ UI issue section to docs ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants