From 31a2633c52c1b9026bea8a6d2b220bb4d81e8bb1 Mon Sep 17 00:00:00 2001 From: Jyoti Deka Date: Mon, 4 Aug 2014 07:29:11 -0400 Subject: [PATCH] Resizable : Width calculation is wrong when containment element is position: relative and immediate parent Fixes - #10140 --- tests/unit/resizable/resizable_options.js | 59 +++++++++++++++++++++-- ui/resizable.js | 19 ++++---- 2 files changed, 66 insertions(+), 12 deletions(-) diff --git a/tests/unit/resizable/resizable_options.js b/tests/unit/resizable/resizable_options.js index 34fef47f02e..ba93e011376 100644 --- a/tests/unit/resizable/resizable_options.js +++ b/tests/unit/resizable/resizable_options.js @@ -155,7 +155,7 @@ test( "aspectRatio: Resizing can move objects", function() { }); test( "containment", function() { - expect( 6 ); + expect( 12 ); var element = $( "#resizable1" ).resizable({ containment: "#container" }); @@ -176,10 +176,63 @@ test( "containment", function() { }); TestHelpers.resizable.drag( ".ui-resizable-e", 300, 0 ); - equal( element.width(), 400, "element able to resize itself to max allowable width within container" ); + equal( element.width(), 400, "Relative Position ,Containment not parent - containment within container width" ); TestHelpers.resizable.drag( ".ui-resizable-s", 0, 300 ); - equal( element.height(), 400, "element able to resize itself to max allowable height within container" ); + equal( element.height(), 400, "Relative Position ,Containment not parent - containment within container height" ); + + $("#container2").remove(); + element = $( "
I m a resizable.
" ).appendTo( "body" ); + + $( "#child" ).css( { left : 50, top : 50 } ); + $( "#parent" ).css( { left : 50, top : 50 } ); + $( "#container2" ).css( { left : 50, top : 50 } ); + + element = $( "#child" ).resizable({ + containment: "#container2", + handles: "all" + }); + + TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 ); + equal( element.width(), 300, "Relative Position with Left location , Containment not parent - containment within container width" ); + + TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 ); + equal( element.height(), 300, "Relative Position with Top location , Containment not parent - containment within container height" ); + + $("#container2").remove(); + element = $( "
I m a resizable.
" ).appendTo( "body" ); + + + // http://bugs.jqueryui.com/ticket/10140 - Resizable: Width calculation is wrong when containment element is "position: relative" + // when containment element is immediate parent + element = $( "#child" ).resizable({ + containment: "parent", + handles: "all" + }); + + TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 ); + equal( element.width(), 300, "Relative Position Containment is parent - containment within container width" ); + + TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 ); + equal( element.height(), 300, "Relative Position ,Containment is parent - containment within container height" ); + + $("#container2").remove(); + element = $( "
I m a resizable.
" ).appendTo( "body" ); + + $( "#child" ).css( { left : 50, top : 50 } ); + $( "#parent" ).css( { left : 50, top : 50 } ); + $( "#container2" ).css( { left : 50, top : 50 } ); + + element = $( "#child" ).resizable({ + containment: "parent", + handles: "all" + }); + + TestHelpers.resizable.drag( ".ui-resizable-e", 400, 0 ); + equal( element.width(), 250, "Relative Position with Left location, Containment is parent - containment within container width" ); + + TestHelpers.resizable.drag( ".ui-resizable-s", 0, 400 ); + equal( element.height(), 250, "Relative Position with Top location, Containment is parent - containment within container height" ); }); test("grid", function() { diff --git a/ui/resizable.js b/ui/resizable.js index b59f3201309..09e51605b59 100644 --- a/ui/resizable.js +++ b/ui/resizable.js @@ -797,19 +797,20 @@ $.ui.plugin.add( "resizable", "containment", { that.position.top = that._helper ? co.top : 0; } - 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 - 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" ) ); - - if ( isParent && isOffsetRelative ) { - woset -= Math.abs( that.parentData.left ); + + if ( isParent && isOffsetRelative ){ + that.offset.left = that.parentData.left + that.position.left; + that.offset.top = that.parentData.top + that.position.top; + }else{ + that.offset.left = that.element.offset().left; + that.offset.top = that.element.offset().top; } + 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 ); + if ( woset + that.size.width >= that.parentData.width ) { that.size.width = that.parentData.width - woset; if ( pRatio ) {