Skip to content

Commit 62f2ccc

Browse files
authored
Resizable: Fix resizing of elems with box-sizing: border-box
Fixes jquerygh-1979 Closes jquerygh-2012
1 parent 5fa0db4 commit 62f2ccc

File tree

2 files changed

+32
-3
lines changed

2 files changed

+32
-3
lines changed

tests/unit/resizable/options.js

+26
Original file line numberDiff line numberDiff line change
@@ -532,4 +532,30 @@ QUnit.test( "alsoResize + multiple selection", function( assert ) {
532532
assert.equal( other2.height(), 150, "alsoResize o2 constrained height at containment edge" );
533533
} );
534534

535+
QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
536+
assert.expect( 4 );
537+
538+
var other = $( "<div>" )
539+
.css( {
540+
width: 50,
541+
height: 50,
542+
padding: 10,
543+
border: 5
544+
} )
545+
.appendTo( "body" ),
546+
element = $( "#resizable1" ).resizable( {
547+
alsoResize: other
548+
} ),
549+
handle = ".ui-resizable-se";
550+
551+
$( "*" ).css( "box-sizing", "border-box" );
552+
553+
testHelper.drag( handle, 80, 80 );
554+
555+
assert.equal( element.width(), 180, "resizable width" );
556+
assert.equal( parseFloat( other.css( "width" ) ), 130, "alsoResize width" );
557+
assert.equal( element.height(), 180, "resizable height" );
558+
assert.equal( parseFloat( other.css( "height" ) ), 130, "alsoResize height" );
559+
} );
560+
535561
} );

ui/widgets/resizable.js

+6-3
Original file line numberDiff line numberDiff line change
@@ -533,15 +533,18 @@ $.widget( "ui.resizable", $.ui.mouse, {
533533
if ( this.position.left !== this.prevPosition.left ) {
534534
props.left = this.position.left + "px";
535535
}
536+
537+
this.helper.css( props );
538+
536539
if ( this.size.width !== this.prevSize.width ) {
537540
props.width = this.size.width + "px";
541+
this.helper.width( props.width );
538542
}
539543
if ( this.size.height !== this.prevSize.height ) {
540544
props.height = this.size.height + "px";
545+
this.helper.height( props.height );
541546
}
542547

543-
this.helper.css( props );
544-
545548
return props;
546549
},
547550

@@ -1048,7 +1051,7 @@ $.ui.plugin.add( "resizable", "alsoResize", {
10481051
$( o.alsoResize ).each( function() {
10491052
var el = $( this );
10501053
el.data( "ui-resizable-alsoresize", {
1051-
width: parseFloat( el.width() ), height: parseFloat( el.height() ),
1054+
width: parseFloat( el.css( "width" ) ), height: parseFloat( el.css( "height" ) ),
10521055
left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) )
10531056
} );
10541057
} );

0 commit comments

Comments
 (0)