Resizable: Fix resizing of elems with `box-sizing: border-box`

Fixes gh-1979
Closes gh-2012

diff --git a/tests/unit/resizable/options.js b/tests/unit/resizable/options.js
index d85840562026b334574cdc25b8d7d8f4756eab21..6149fbfefc98243cfbf30e65e33f5c76659a57db 100644 (file)
--- a/tests/unit/resizable/options.js
+++ b/tests/unit/resizable/options.js
@@ -532,4 +532,30 @@ QUnit.test( "alsoResize + multiple selection", function( assert ) {
        assert.equal( other2.height(), 150, "alsoResize o2 constrained height at containment edge" );
 } );
 
+QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
+       assert.expect( 4 );
+
+       var other = $( "<div>" )
+                       .css( {
+                               width: 50,
+                               height: 50,
+                               padding: 10,
+                               border: 5
+                       } )
+                       .appendTo( "body" ),
+               element = $( "#resizable1" ).resizable( {
+                       alsoResize: other
+               } ),
+               handle = ".ui-resizable-se";
+
+       $( "*" ).css( "box-sizing", "border-box" );
+
+       testHelper.drag( handle, 80, 80 );
+
+       assert.equal( element.width(), 180, "resizable width" );
+       assert.equal( parseFloat( other.css( "width" ) ), 130, "alsoResize width" );
+       assert.equal( element.height(), 180, "resizable height" );
+       assert.equal( parseFloat( other.css( "height" ) ), 130, "alsoResize height" );
+} );
+
 } );

diff --git a/ui/widgets/resizable.js b/ui/widgets/resizable.js
index d1abbd5397a3ca85dc23032bbf988838cf2661de..3f1f19833d8c2e732c7bac7b94ea04c718e5bd70 100644 (file)
--- a/ui/widgets/resizable.js
+++ b/ui/widgets/resizable.js
@@ -533,15 +533,18 @@ $.widget( "ui.resizable", $.ui.mouse, {
                if ( this.position.left !== this.prevPosition.left ) {
                        props.left = this.position.left + "px";
                }
+
+               this.helper.css( props );
+
                if ( this.size.width !== this.prevSize.width ) {
                        props.width = this.size.width + "px";
+                       this.helper.width( props.width );
                }
                if ( this.size.height !== this.prevSize.height ) {
                        props.height = this.size.height + "px";
+                       this.helper.height( props.height );
                }
 
-               this.helper.css( props );
-
                return props;
        },
 
@@ -1048,7 +1051,7 @@ $.ui.plugin.add( "resizable", "alsoResize", {
                $( o.alsoResize ).each( function() {
                        var el = $( this );
                        el.data( "ui-resizable-alsoresize", {
-                               width: parseFloat( el.width() ), height: parseFloat( el.height() ),
+                               width: parseFloat( el.css( "width" ) ), height: parseFloat( el.css( "height" ) ),
                                left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) )
                        } );
                } );