Opened 11 years ago

Closed 11 years ago

Last modified 7 years ago

#4692 closed bug (duplicate)

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:

Description

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

With draggable and resizable 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:

HTML/CSS:

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

JavaScript:

$('#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. <h1>).

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 2.0.172.33
  • Internet Explorer 8.

Change History (2)

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

Resolution: duplicate
Status: newclosed

Duplicate of #4489.

comment:2 Changed 7 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.