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 2 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
124 changes: 25 additions & 99 deletions tests/unit/resizable/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,41 +246,29 @@ QUnit.test( "nested resizable", function( assert ) {

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)" );
testResizableWithBoxSizing( assert, true, false );
} );

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

$( "<style> * { box-sizing: content-box; } </style>" ).appendTo( "#qunit-fixture" );
QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box", function( assert ) {
assert.expect( 4 );
testResizableWithBoxSizing( assert, true, true );
} );

//Both scrollbars
var elementContent = $( "<div>" )
QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box", function( assert ) {
assert.expect( 4 );
testResizableWithBoxSizing( assert, false, true );
} );

function testResizableWithBoxSizing( assert, isBorderBox, applyScaleTransform ) {
var widthBefore, heightBefore,
cssBoxSizing = isBorderBox ? "border-box" : "content-box",
cssTrasform = applyScaleTransform ? "scale(1.5)" : "",
elementContent = $( "<div>" )
.css( {
width: "200px",
height: "200px",
Expand All @@ -290,88 +278,26 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a
margin: "20px"
} )
.appendTo( "#resizable1" ),
element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
handle = ".ui-resizable-se";
element = $( "#resizable1" ).css( { overflow: "auto", transform: cssTrasform } ).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";
$( "<style> * { box-sizing: " + cssBoxSizing + "; } </style>" ).appendTo( "#qunit-fixture" );

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

// Both scrollbars
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.
// 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)" );
} );
}

} );
43 changes: 12 additions & 31 deletions tests/unit/resizable/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -568,39 +568,18 @@ QUnit.test( "alsoResize with box-sizing: border-box", function( assert ) {

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" );
testAlsoResizeWithBoxSizing( assert, true );
} );

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

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

var other = $( "<div>" )
function testAlsoResizeWithBoxSizing( assert, isBorderBox ) {
var widthBefore, heightBefore,
cssBoxSizing = isBorderBox ? "border-box" : "content-box",
other = $( "<div>" )
.css( {
width: "150px",
height: "150px",
Expand All @@ -616,16 +595,18 @@ QUnit.test( "alsoResize with scrollbars and box-sizing: content-box", function(
} ),
handle = ".ui-resizable-se";

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

// In some browsers scrollbar may change element computed size.
var widthBefore = other.innerWidth();
var heightBefore = other.innerHeight();
widthBefore = other.innerWidth();
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" );
} );
}

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

_hasScroll: function( el, a ) {

var overflow = $( el ).css( "overflow" );
var scroll,
has = false,
overflow = $( el ).css( "overflow" );

if ( overflow === "hidden" ) {
return false;
}
if ( overflow === "scroll" ) {
return true;
}

var scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop",
has = false;
scroll = ( a && a === "left" ) ? "scrollLeft" : "scrollTop";

if ( el[ scroll ] > 0 ) {
return true;
Expand Down Expand Up @@ -366,7 +368,7 @@ $.widget( "ui.resizable", $.ui.mouse, {

_mouseStart: function( event ) {

var curleft, curtop, cursor,
var curleft, curtop, cursor, calculatedSize,
o = this.options,
el = this.element;

Expand All @@ -385,7 +387,6 @@ $.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 );
}
Expand Down Expand Up @@ -700,7 +701,8 @@ $.widget( "ui.resizable", $.ui.mouse, {
},

_calculateAdjustedElementDimensions: function( element ) {
var ce = element.get( 0 );
var elWidth, elHeight, paddingBorder,
ce = element.get( 0 );

if ( element.css( "box-sizing" ) !== "content-box" ||
( !this._hasScroll( ce ) && !this._hasScroll( ce, "left" ) ) ) {
Expand All @@ -711,10 +713,10 @@ $.widget( "ui.resizable", $.ui.mouse, {
}

// 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 );
elWidth = parseFloat( ce.style.width );
elHeight = parseFloat( ce.style.height );

var paddingBorder = this._getPaddingPlusBorderDimensions( element );
paddingBorder = this._getPaddingPlusBorderDimensions( element );
elWidth = isNaN( elWidth ) ?
this._getElementTheoreticalSize( element, paddingBorder, "width" ) :
elWidth;
Expand All @@ -737,7 +739,8 @@ $.widget( "ui.resizable", $.ui.mouse, {
0.5

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

return size;
Expand Down Expand Up @@ -1097,9 +1100,8 @@ $.ui.plugin.add( "resizable", "alsoResize", {
o = that.options;

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

var elSize = that._calculateAdjustedElementDimensions( el );
var el = $( this ),
elSize = that._calculateAdjustedElementDimensions( el );

el.data( "ui-resizable-alsoresize", {
width: elSize.width, height: elSize.height,
Expand Down