#6939 closed bug (fixed)
Resizable: element both draggable and resizable gets unexpected position:absolute on resize
Reported by: | rdworth | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.11.0 |
Component: | ui.resizable | Version: | 1.8.9 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
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
Change History (14)
comment:1 Changed 12 years ago by
comment:2 Changed 12 years ago by
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
comment:3 Changed 11 years ago by
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.
comment:4 Changed 11 years ago by
Milestone: | 1.9.0 → 2.0.0 |
---|
comment:5 Changed 11 years ago by
Status: | new → open |
---|
confirmed on latest: http://jsbin.com/utaxo3/70
comment:9 Changed 10 years ago by
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.
comment:12 Changed 9 years ago by
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
comment:13 Changed 9 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
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
comment:14 Changed 9 years ago by
Milestone: | 2.0.0 → 1.11.0 |
---|
This issue is caused by the current fix for #1749
From jquery.ui.resizable.js lines 243-246: