From c03cb8079c6984fb9286a64d980d367d86b9cd8b Mon Sep 17 00:00:00 2001 From: Jyoti Deka Date: Thu, 7 Nov 2013 09:39:51 -0500 Subject: [PATCH] Resizable: containment now works with non - immediate children Fixes #7485 Closes gh-1130 --- tests/unit/resizable/resizable.html | 22 ++++++++++++++++++++++ tests/unit/resizable/resizable_options.js | 15 ++++++++++++++- ui/jquery.ui.resizable.js | 4 ++-- 3 files changed, 38 insertions(+), 3 deletions(-) diff --git a/tests/unit/resizable/resizable.html b/tests/unit/resizable/resizable.html index 255c98887..bfff528fa 100644 --- a/tests/unit/resizable/resizable.html +++ b/tests/unit/resizable/resizable.html @@ -44,6 +44,22 @@ height: 100px; width: 100px; } + #container2 { + position: relative; + width: 400px; + height: 400px; + margin: 30px 0 0 30px; + } + #parent { + position: relative; + width: 300px; + height: 300px; + } + #child { + position: relative; + width: 100px; + height: 100px; + } @@ -58,6 +74,12 @@

I'm a resizable.

+ +

I'm a resizable.

diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index 89504e363..8f1702a38 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -124,7 +124,7 @@ test("aspectRatio: 'preserve' (ne)", function() { }); test( "containment", function() { - expect( 4 ); + expect( 6 ); var element = $( "#resizable1" ).resizable({ containment: "#container" }); @@ -136,6 +136,19 @@ test( "containment", function() { TestHelpers.resizable.drag( ".ui-resizable-se", 400, 400 ); equal( element.width(), 300, "constrained width at containment edge" ); equal( element.height(), 200, "constrained height at containment edge" ); + + // http://bugs.jqueryui.com/ticket/7485 - Resizable: Containment calculation is wrong + // when containment element is not the immediate parent + element = $( "#child" ).resizable({ + containment: "#container2", + handles: "all" + }); + + TestHelpers.resizable.drag( ".ui-resizable-e", 300, 0 ); + equal( element.width(), 400, "element able to resize itself to max allowable width within container" ); + + TestHelpers.resizable.drag( ".ui-resizable-s", 0, 300 ); + equal( element.height(), 400, "element able to resize itself to max allowable height within container" ); }); test("grid", function() { diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js index dc14a53a6..a825d68d1 100644 --- a/ui/jquery.ui.resizable.js +++ b/ui/jquery.ui.resizable.js @@ -792,8 +792,8 @@ $.ui.plugin.add("resizable", "containment", { that.offset.left = that.parentData.left+that.position.left; that.offset.top = that.parentData.top+that.position.top; - woset = Math.abs( (that._helper ? that.offset.left - cop.left : (that.offset.left - cop.left)) + that.sizeDiff.width ); - hoset = Math.abs( (that._helper ? that.offset.top - cop.top : (that.offset.top - co.top)) + that.sizeDiff.height ); + woset = Math.abs( ( that._helper ? that.offset.left - cop.left : ( that.offset.left - co.left ) ) + that.sizeDiff.width ); + hoset = Math.abs( ( that._helper ? that.offset.top - cop.top : ( that.offset.top - co.top ) ) + that.sizeDiff.height ); isParent = that.containerElement.get(0) === that.element.parent().get(0); isOffsetRelative = /relative|absolute/.test(that.containerElement.css("position")); -- 2.39.5