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

Fixes gh-1979
Closes gh-2012
This commit is contained in:
Matías Cánepa 2022-10-10 06:00:50 -03:00 committed by GitHub
parent 5fa0db48d7
commit 62f2ccc567
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 3 deletions

View File

@ -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" );
} );
} );

View File

@ -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" ) )
} );
} );