Skip to main content

Search and Top Navigation

#4692 closed bug (duplicate)

Opened July 16, 2009 09:54PM UTC

Closed July 23, 2009 02:09PM UTC

Last modified October 11, 2012 09:15PM UTC

Incorrect containment when using both draggable and resizable

Reported by: hyandrew Owned by:
Priority: minor Milestone:
Component: ui.resizable Version: 1.7.2
Keywords: resizable, draggable, containment Cc:
Blocked by: Blocking:

While trying to implement an image cropping application, I came across this bug.


applied to a target element (with containment set to its parent container), the target element can only be resized to a maximum of 8 pixels less than the width and height of its container. This happens to be exactly the default margin of the HTML document. An example is as follows:


<div id="container" style="width: 800px; height: 600px; background: red;">
    <div id="target" style="height: 100px; width: 100px; background: green;"></div>


$('#target').draggable({containment: 'parent'});
$('#target').resizable({containment: 'parent'});

In this example, the target can only be resized to a maximum of 792 × 592 pixels. The mismatched containment is even worse if there are elements with before the container element (e.g.


As a quick workaround, I found that adding a

position: absolute
style to the container element fixes the problem. I have tested this in:

  • Firefox 3.5 (Win XP + Mac OS X 10.5.7)
  • Safari 4.0.1 (5530.18)
  • Google Chrome
  • Internet Explorer 8.
Attachments (0)
Change History (2)

Changed July 23, 2009 02:09PM UTC by scottgonzalez comment:1

resolution: → duplicate
status: newclosed

Duplicate of #4489.

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:2

milestone: TBD

Milestone TBD deleted