Opened 6 years ago

Closed 3 years ago

Last modified 3 years ago

#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 6 years ago by 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 });
}

comment:2 Changed 6 years ago by 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

Last edited 4 years ago by mikesherov (previous) (diff)

comment:3 Changed 5 years ago by 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.

Last edited 5 years ago by aeltrius (previous) (diff)

comment:4 Changed 5 years ago by Scott González

Milestone: 1.9.02.0.0

comment:5 Changed 4 years ago by mikesherov

Status: newopen

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

comment:6 Changed 4 years ago by tj.vantoll

#5335 is a duplicate of this ticket.

comment:7 Changed 4 years ago by tj.vantoll

#4893 is a duplicate of this ticket.

comment:8 Changed 4 years ago by tj.vantoll

#5399 is a duplicate of this ticket.

comment:9 Changed 4 years ago by 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.

Last edited 4 years ago by CodeTunnel (previous) (diff)

comment:10 Changed 4 years ago by Scott González

#9418 is a duplicate of this ticket.

comment:11 Changed 4 years ago by Scott González

#9449 is a duplicate of this ticket.

comment:13 Changed 3 years ago by Jörn Zaefferer

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

comment:14 Changed 3 years ago by Scott González

Milestone: 2.0.01.11.0
Note: See TracTickets for help on using tickets.