Resizable: modified to allow resizing when resizables are nested.

Fixes #5025
Closes gh-1149

diff --git a/tests/unit/resizable/resizable_core.js b/tests/unit/resizable/resizable_core.js
index b02e8b4f183ccdbb29ecfb5292049213eb35762c..f0b5cea20e1e418454a087b9a1daa84f03ffd4e6 100644 (file)
--- a/tests/unit/resizable/resizable_core.js
+++ b/tests/unit/resizable/resizable_core.js
@@ -206,4 +206,37 @@ test( "resizable stores correct size when using helper and grid (#9547)", functi
        equal( target.height(), 100, "compare height" );
 });
 
+test( "nested resizable", function() {
+       expect( 4 );
+       
+       var outer = $( "<div id='outer' style='width:50px'></div>" ),
+               inner = $( "<div id='inner' style='width:30px'></div>" ),
+               target = $( "#resizable1" ),
+               innerHandle,
+               outerHandle;
+
+       outer.appendTo( target );
+       inner.appendTo( outer );
+
+       inner.resizable( { handles : "e" } );
+       outer.resizable( { handles : "e" } );
+       target.resizable( { handles : "e" } );
+
+       innerHandle = $( "#inner > .ui-resizable-e" );
+       outerHandle = $( "#outer > .ui-resizable-e" );
+       
+       TestHelpers.resizable.drag( innerHandle, 10 );
+       equal( inner.width(), 40, "compare width of inner element" );
+       TestHelpers.resizable.drag( innerHandle, -10 );
+       equal( inner.width(), 30, "compare width of inner element" );
+
+       TestHelpers.resizable.drag( outerHandle, 10 );
+       equal( outer.width(), 60, "compare width of outer element" );
+       TestHelpers.resizable.drag( outerHandle, -10 );
+       equal( outer.width(), 50, "compare width of outer element" );
+
+       inner.remove();
+       outer.remove();
+});
+
 })(jQuery);

diff --git a/ui/jquery.ui.resizable.js b/ui/jquery.ui.resizable.js
index 040f029f96814b96925741f4bb41fec8e2e28444..dc14a53a67273e1dc04d7a54abcf7612601c3750 100644 (file)
--- a/ui/jquery.ui.resizable.js
+++ b/ui/jquery.ui.resizable.js
@@ -169,7 +169,7 @@ $.widget("ui.resizable", $.ui.mouse, {
                        for(i in this.handles) {
 
                                if(this.handles[i].constructor === String) {
-                                       this.handles[i] = $(this.handles[i], this.element).show();
+                                       this.handles[i] = this.element.children( this.handles[ i ] ).first().show();
                                }
 
                                //Apply pad to wrapper element, needed to fix axis position (textarea, inputs, scrolls)