Search and Top Navigation
#6939 closed bug (fixed)
Opened February 04, 2011 10:37AM UTC
Closed April 16, 2014 04:50PM UTC
Last modified April 16, 2014 05:06PM UTC
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
Attachments (0)
Change History (14)
Changed February 04, 2011 10:40AM UTC by comment:1
Changed February 23, 2011 11:23PM UTC by comment:2
| _comment0: | 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 → 1352871070976122 |
|---|
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
Changed September 27, 2012 04:24PM UTC by comment:3
| _comment0: | Better 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. → 1348763127124964 |
|---|
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.
Changed October 11, 2012 02:52PM UTC by comment:4
| milestone: | 1.9.0 → 2.0.0 |
|---|
Changed October 29, 2012 03:18PM UTC by comment:5
| status: | new → open |
|---|
confirmed on latest: http://jsbin.com/utaxo3/70
Changed February 21, 2013 03:55PM UTC by comment:9
| _comment0: | 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 simple worked on the fixed draggable element. → 1361462727141247 |
|---|
Here is a reduced test case and work around.
Bug:
Simply scroll down on the page and then try to resize the fixed element. It jumps position on the page during resize.
Workaround:
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.
Changed July 09, 2013 06:48PM UTC by comment:10
#9418 is a duplicate of this ticket.
Changed July 23, 2013 04:00PM UTC by comment:11
#9449 is a duplicate of this ticket.
Changed March 11, 2014 10:29AM UTC by comment:12
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
Changed April 16, 2014 04:50PM UTC by comment:13
| 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
Changed April 16, 2014 05:06PM UTC by comment:14
| 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:
// 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 }); }