Skip to main content

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 rdworth comment:1

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 });
}

Changed February 23, 2011 11:23PM UTC by mikesherov 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/91352871070976122

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

Changed September 27, 2012 04:24PM UTC by aeltrius 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 scottgonzalez comment:4

milestone: 1.9.02.0.0

Changed October 29, 2012 03:18PM UTC by mikesherov comment:5

status: newopen

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

Changed November 07, 2012 05:21PM UTC by tj.vantoll comment:6

#5335 is a duplicate of this ticket.

Changed November 07, 2012 05:24PM UTC by tj.vantoll comment:7

#4893 is a duplicate of this ticket.

Changed November 07, 2012 05:27PM UTC by tj.vantoll comment:8

#5399 is a duplicate of this ticket.

Changed February 21, 2013 03:55PM UTC by CodeTunnel 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:

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.

Changed July 09, 2013 06:48PM UTC by scottgonzalez comment:10

#9418 is a duplicate of this ticket.

Changed July 23, 2013 04:00PM UTC by scottgonzalez comment:11

#9449 is a duplicate of this ticket.

Changed March 11, 2014 10:29AM UTC by jzaefferer comment:12

Changed April 16, 2014 04:50PM UTC by Jörn Zaefferer comment:13

resolution: → fixed
status: openclosed

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 scottgonzalez comment:14

milestone: 2.0.01.11.0