Resizable: element both draggable and resizable gets unexpected position:absolute on resize

[rdworth]

From ​http://forum.jquery.com/topic/draggable-resizable-with-multiple-elements-being-buggy

• When a draggable element with position: relative is dragged it keeps position: relative.

• When a resizable element with position: relative is resized it keeps position: relative.

• When a draggable and resizable element is resized (not when dragged) it gets position: absolute. This is unexpected and causes elements after it that are also position: relative to shift.

Test case: ​http://jsbin.com/utaxo3

[rdworth]

This issue is caused by the current fix for #1749

From jquery.ui.resizable.js lines 243-246:

// bugfix for http://dev.jquery.com/ticket/1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
	el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
}

[charlietfl]

I needed this to work on a project so I did a quick workaround by adding an extra option "alwaysRelative" to resizable.js and modified the above to:

if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
	// hack to allow resize and draggable to work together
	if(!o.alwaysRelative){
	el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
	}
}

Not sure if this is viable long term modification but it did fix in test case ​http://jsbin.com/utaxo3/9

[aeltrius]

Quick Fix

add this to your resizable/draggable elements:

.element {
position: absolute !important;
}

and the elements won't depend on their relative positions when you shift and resize them.

[mikesherov]

confirmed on latest: ​http://jsbin.com/utaxo3/70

[tj.vantoll]

#5335 is a duplicate of this ticket.

[tj.vantoll]

#4893 is a duplicate of this ticket.

[tj.vantoll]

#5399 is a duplicate of this ticket.

[CodeTunnel]

Here is a reduced test case and work around.

Bug:

​http://jsfiddle.net/FfRRW/10/

Simply scroll down on the page and then try to resize the fixed element. It jumps position on the page during resize.

---

Workaround:

​http://jsfiddle.net/FfRRW/11/

The simplest workaround I've found is to make the resizable element a child of the draggable element. This works but adds unnecessary complexity. It would be much nicer if resizable simply worked on the fixed draggable element.

[Scott González]

#9418 is a duplicate of this ticket.

[Scott González]

#9449 is a duplicate of this ticket.

[Jörn Zaefferer]

The code responsible for this is a workaround for something else: ​https://github.com/jquery/jquery-ui/blob/13be9205e1a0d227ef44ab28aed6d0e18aa5cf69/ui/resizable.js#L295-300 which points to ​http://bugs.jqueryui.com/ticket/1749

The fix itself exists since the beginning of time: ​https://github.com/jquery/jquery-ui/commit/ab281b36d7cc10913a77f2f8da9ff7b7c011b3ee#diff-403ec53793e302fe0e3c1ff76b3a8b58R281

And was effectively just updated once, five years ago: ​https://github.com/jquery/jquery-ui/commit/7f12279da59e86c0a0342e7a17b927c53be73697

[Jörn Zaefferer]

Resizable: Remove bad workaround for draggable+resizable

This adds a compound test page for draggable+resizable, which had no coverage before. Using that page shows that there is no way to reproduce the behaviour described in the original ticket that caused this workaround, since its not possible to resize an element beyond the window boundaries. Therefore removing the workaround, which is 6+ years old and has no test coverage, seems like the sanest approach.

Fixes #6939 Closes gh-1210

Changeset: 3576ceb360eb0381a98f3c6b67d890c3834efa8a