Skip to content

Resizable: Fix content shrink on resize #2281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Sep 9, 2024
Merged

Resizable: Fix content shrink on resize #2281

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
37bcb36
Resizable: Fix content shrink on resize
Daniel-Garmig Aug 20, 2024
673b069
Fixed and improved tests
Daniel-Garmig Aug 24, 2024
a90f83a
Changed implementation to avoid getBoundingClientRect().
Daniel-Garmig Aug 24, 2024
fe9c9f8
Added tests for resizable when a css transform is set.
Daniel-Garmig Aug 24, 2024
4ad61c9
Changed element size calculations.
Daniel-Garmig Aug 25, 2024
80b2c3a
Updated tests.
Daniel-Garmig Aug 25, 2024
daee00b
Fix comment and variable styles.
Daniel-Garmig Sep 7, 2024
6dd4bf7
Changed test cases to use a generic function.
Daniel-Garmig Sep 7, 2024
1de8554
Fixed boolean traps.
Daniel-Garmig Sep 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 130 additions & 0 deletions tests/unit/resizable/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,4 +244,134 @@ QUnit.test( "nested resizable", function( assert ) {
outer.remove();
} );

QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( assert ) {
assert.expect( 4 );

$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );

//Both scrollbars
var elementContent = $( "<div>" )
.css( {
width: "200px",
height: "200px",
padding: "10px",
border: "5px",
borderStyle: "solid",
margin: "20px"
} )
.appendTo( "#resizable1" ),
element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
handle = ".ui-resizable-se";

testHelper.drag( handle, 10, 10 );
assert.equal( element.width(), 110, "element width (both scrollbars)" );
assert.equal( element.height(), 110, "element height (both scrollbars)" );

//Single (vertical) scrollbar.
elementContent.css( "width", "50px" );
testHelper.drag( handle, 10, 10 );
assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
assert.equal( element.height(), 120, "element height (only vertical scrollbar)" );
} );

QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( assert ) {
assert.expect( 4 );

$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );

//Both scrollbars
var elementContent = $( "<div>" )
.css( {
width: "200px",
height: "200px",
padding: "10px",
border: "5px",
borderStyle: "solid",
margin: "20px"
} )
.appendTo( "#resizable1" ),
element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
handle = ".ui-resizable-se";

// In some browsers scrollbar may change element size (when "box-sizing: content-box")
var widthBefore = element.innerWidth();
var heightBefore = element.innerHeight();

testHelper.drag( handle, 10, 10 );
assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width (both scrollbars)" );
assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height (both scrollbars)" );

//Single (vertical) scrollbar.
elementContent.css( "width", "50px" );

testHelper.drag( handle, 10, 10 );
assert.equal( parseFloat( element.innerWidth() ), widthBefore + 20, "element width (only vertical scrollbar)" );
assert.equal( parseFloat( element.innerHeight() ), heightBefore + 20, "element height (only vertical scrollbar)" );
} );

QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) {
assert.expect( 4 );

$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );

//Both scrollbars
var elementContent = $( "<div>" )
.css( {
width: "200px",
height: "200px",
padding: "10px",
border: "5px",
borderStyle: "solid",
margin: "20px"
} )
.appendTo( "#resizable1" ),
element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
handle = ".ui-resizable-se";

testHelper.drag( handle, 10, 10 );
assert.equal( element.width(), 110, "element width (both scrollbars)" );
assert.equal( element.height(), 110, "element height (both scrollbars)" );

//Single (vertical) scrollbar.
elementContent.css( "width", "50px" );
testHelper.drag( handle, 10, 10 );
assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
assert.equal( element.height(), 120, "element height (only vertical scrollbar)" );
} );

QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) {
assert.expect( 4 );

$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );

//Both scrollbars
var elementContent = $( "<div>" )
.css( {
width: "200px",
height: "200px",
padding: "10px",
border: "5px",
borderStyle: "solid",
margin: "20px"
} )
.appendTo( "#resizable1" ),
element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
handle = ".ui-resizable-se";

// In some browsers scrollbar may change element size (when "box-sizing: content-box")
var widthBefore = element.innerWidth();
var heightBefore = element.innerHeight();

testHelper.drag( handle, 10, 10 );
assert.equal( parseFloat( element.innerWidth() ), widthBefore + 10, "element width (both scrollbars)" );
assert.equal( parseFloat( element.innerHeight() ), heightBefore + 10, "element height (both scrollbars)" );

//Single (vertical) scrollbar.
elementContent.css( "width", "50px" );

testHelper.drag( handle, 10, 10 );
assert.equal( parseFloat( element.innerWidth() ), widthBefore + 20, "element width (only vertical scrollbar)" );
assert.equal( parseFloat( element.innerHeight() ), heightBefore + 20, "element height (only vertical scrollbar)" );
} );

} );
77 changes: 70 additions & 7 deletions tests/unit/resizable/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -542,21 +542,22 @@ QUnit.test( "alsoResize + multiple selection", function( assert ) {
QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
assert.expect( 4 );

$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );

var other = $( "<div>" )
.css( {
width: 50,
height: 50,
padding: 10,
border: 5
width: "50px",
height: "50px",
padding: "10px",
border: "5px",
borderStyle: "solid"
} )
.appendTo( "body" ),
.appendTo( "#qunit-fixture" ),
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" );
Expand All @@ -565,4 +566,66 @@ QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {
assert.equal( parseFloat( other.css( "height" ) ), 130, "alsoResize height" );
} );

QUnit.test( "alsoResize with scrollbars and box-sizing: border-box", function( assert ) {
assert.expect( 4 );

$( "<style> * { box-sizing: border-box; } </style>" ).appendTo( "#qunit-fixture" );

var other = $( "<div>" )
.css( {
width: "150px",
height: "150px",
padding: "10px",
border: "5px",
borderStyle: "solid",
margin: "25px",
overflow: "scroll"
} )
.appendTo( "#qunit-fixture" ),
element = $( "#resizable1" ).resizable( {
alsoResize: other
} ),
handle = ".ui-resizable-se";

testHelper.drag( handle, 80, 80 );

assert.equal( element.width(), 180, "resizable width" );
assert.equal( parseFloat( other.css( "width" ) ), 230, "alsoResize width" );
assert.equal( element.height(), 180, "resizable height" );
assert.equal( parseFloat( other.css( "height" ) ), 230, "alsoResize height" );
} );

QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function( assert ) {
assert.expect( 4 );

$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );

var other = $( "<div>" )
.css( {
width: "150px",
height: "150px",
padding: "10px",
border: "5px",
borderStyle: "solid",
margin: "20px",
overflow: "scroll"
} )
.appendTo( "#qunit-fixture" ),
element = $( "#resizable1" ).resizable( {
alsoResize: other
} ),
handle = ".ui-resizable-se";

// In some browsers scrollbar may change element computed size.
var widthBefore = other.innerWidth();
var heightBefore = other.innerHeight();

testHelper.drag( handle, 80, 80 );

assert.equal( element.width(), 180, "resizable width" );
assert.equal( parseFloat( other.innerWidth() ), widthBefore + 80, "alsoResize width" );
assert.equal( element.height(), 180, "resizable height" );
assert.equal( parseFloat( other.innerHeight() ), heightBefore + 80, "alsoResize height" );
} );

} );
68 changes: 62 additions & 6 deletions ui/widgets/resizable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,13 @@ $.widget( "ui.resizable", $.ui.mouse, {

_hasScroll: function( el, a ) {

if ( $( el ).css( "overflow" ) === "hidden" ) {
var overflow = $( el ).css( "overflow" );
if ( overflow === "hidden" ) {
return false;
}
if ( overflow === "scroll" ) {
return true;
}

var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop",
has = false;
Expand Down Expand Up @@ -381,20 +385,25 @@ $.widget( "ui.resizable", $.ui.mouse, {
this.offset = this.helper.offset();
this.position = { left: curleft, top: curtop };

var calculatedSize = undefined;
if ( !this._helper ) {
calculatedSize = this._calculateAdjustedElementDimensions( el );
}

this.size = this._helper ? {
width: this.helper.width(),
height: this.helper.height()
} : {
width: el.width(),
height: el.height()
width: calculatedSize.width,
height: calculatedSize.height
};

this.originalSize = this._helper ? {
width: el.outerWidth(),
height: el.outerHeight()
} : {
width: el.width(),
height: el.height()
width: calculatedSize.width,
height: calculatedSize.height
};

this.sizeDiff = {
Expand Down Expand Up @@ -690,6 +699,50 @@ $.widget( "ui.resizable", $.ui.mouse, {
};
},

_calculateAdjustedElementDimensions: function( element ) {
var ce = element.get( 0 );

if ( element.css( "box-sizing" ) !== "content-box" ||
( !this._hasScroll( ce ) && !this._hasScroll( ce, "left" ) ) ) {
return {
height: parseFloat( element.css( "height" ) ),
width: parseFloat( element.css( "width" ) )
};
}

// Check if CSS inline styles are set and use those (usually from previous resizes)
var elWidth = parseFloat( ce.style.width );
var elHeight = parseFloat( ce.style.height );

var paddingBorder = this._getPaddingPlusBorderDimensions( element );
elWidth = isNaN( elWidth ) ?
this._getElementTheoreticalSize( element, paddingBorder, "width" ) :
elWidth;
elHeight = isNaN( elHeight ) ?
this._getElementTheoreticalSize( element, paddingBorder, "height" ) :
elHeight;

return {
height: elHeight,
width: elWidth
};
},

_getElementTheoreticalSize: function( element, extraSize, dimension ) {

// offsetWidth/offsetHeight is a rounded sum of content, padding, scroll gutter, and border
var size = Math.max( 0, Math.ceil(
element.get( 0 )[ "offset" + dimension[ 0 ].toUpperCase() + dimension.slice( 1 ) ] -
extraSize[ dimension ] -
0.5

// If offsetWidth/offsetHeight is unknown, then we can't determine theoretical size.
// Use an explicit zero to avoid NaN (gh-3964)
) ) || 0;

return size;
},

_proportionallyResize: function() {

if ( !this._proportionallyResizeElements.length ) {
Expand Down Expand Up @@ -1045,8 +1098,11 @@ $.ui.plugin.add( "resizable", "alsoResize", {

$( o.alsoResize ).each( function() {
var el = $( this );

var elSize = that._calculateAdjustedElementDimensions( el );

el.data( "ui-resizable-alsoresize", {
width: parseFloat( el.css( "width" ) ), height: parseFloat( el.css( "height" ) ),
width: elSize.width, height: elSize.height,
left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) )
} );
} );
Expand Down