Opened 10 years ago
Closed 10 years ago
#9388 closed bug (invalid)
jQuery UI sets 'position: relative' on elements that were made draggable before being added to the DOM
Reported by: | Kerrick | Owned by: | Kerrick |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.draggable | Version: | 1.9.2 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Reduced test case: http://jsfiddle.net/Kerrick/CETWC/
In short, I am creating a jQuery element (such as via var el = $('<h1>Test</h1>');
), enabling jQuery UI's draggable functionality (el.draggable()
), and appending it to the DOM (such as via $('body').append(el);
). Instead of using position: absolute
as jQuery UI usually does, it puts position: relative
into the style
attribute of the element.
Change History (5)
comment:2 Changed 10 years ago by
Owner: | set to Kerrick |
---|---|
Status: | new → pending |
This is happening because of this check here: https://github.com/jquery/jquery-ui/blob/670f650b99103bcea779f8ad0428e05cb7e37053/ui/jquery.ui.draggable.js#L54
this.element.css( "position" )
returns an empty string because the element is not on the DOM, so the subsequent line sets its position
to relative
.
I'm not sure this is actually a bug because the default value we set on draggable elements is relative
. You can see this for yourself if you make the canvas itself draggable on your test case: http://jsfiddle.net/tj_vantoll/6K2zd/.
By defaulting to position: relative
is this causing any issues for you?
comment:3 Changed 10 years ago by
Status: | pending → new |
---|
As you can see in the test case, the element would have position: absolute
applied if it were in the DOM, because of the CSS file. But since jQuery's test is if the element has the CSS (which it cannot if it's not yet in the DOM), rather than if it would have the CSS, it is irrelevant what the CSS file states. The only workaround is to set it via jQuery.css()
or to use !important
in the CSS, both of which are sub-optimal, hacky solutions that cause issues with clean codebases.
comment:4 Changed 10 years ago by
Status: | new → pending |
---|
I'm not sure what we can do here though.
We have to give the element either position: relative
or position: absolute
, and until the element is placed into the DOM the plugin doesn't know about CSS declared preferences.
We have to pick one or the other, and since position: relative
is the default it seems sensical to apply it under these circumstances. $( "<div>" ).draggable().css( "position", "absolute" )
is definitely not ideal though.
Do you have any suggestions for how this could be handled?
comment:5 Changed 10 years ago by
Resolution: | → invalid |
---|---|
Status: | pending → closed |
Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!
As a comparison test case, it acts as it is supposed to if
.draggable()
is called after.append()
, as seen here: http://jsfiddle.net/CETWC/7/