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 1 commit
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
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix comment and variable styles.
  • Loading branch information
@Daniel-Garmig
Daniel-Garmig committed Sep 7, 2024
commit daee00b06046d6920a0dc564642234611a8818a0
64 changes: 33 additions & 31 deletions tests/unit/resizable/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( as

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

//Both scrollbars
// Both scrollbars
var elementContent = $( "<div>" )
.css( {
width: "200px",
Expand All @@ -260,14 +260,14 @@ QUnit.test( "Resizable with scrollbars and box-sizing: border-box", function( as
margin: "20px"
} )
.appendTo( "#resizable1" ),
element = $( "#resizable1" ).css( "overflow", "auto" ).resizable(),
handle = ".ui-resizable-se";
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.
// Single (vertical) scrollbar.
elementContent.css( "width", "50px" );
testHelper.drag( handle, 10, 10 );
assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
Expand All @@ -279,8 +279,9 @@ QUnit.test( "Resizable with scrollbars and box-sizing: content-box", function( a

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

//Both scrollbars
var elementContent = $( "<div>" )
// Both scrollbars
var widthBefore, heightBefore,
elementContent = $( "<div>" )
.css( {
width: "200px",
height: "200px",
Expand All @@ -290,18 +291,18 @@ 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" ).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();
widthBefore = element.innerWidth();
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.
// Single (vertical) scrollbar.
elementContent.css( "width", "50px" );

testHelper.drag( handle, 10, 10 );
Expand All @@ -314,7 +315,7 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box",

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

//Both scrollbars
// Both scrollbars
var elementContent = $( "<div>" )
.css( {
width: "200px",
Expand All @@ -325,14 +326,14 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: border-box",
margin: "20px"
} )
.appendTo( "#resizable1" ),
element = $( "#resizable1" ).css( { overflow: "auto", transform: "scale(1.5)" } ).resizable(),
handle = ".ui-resizable-se";
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.
// Single (vertical) scrollbar.
elementContent.css( "width", "50px" );
testHelper.drag( handle, 10, 10 );
assert.equal( element.width(), 120, "element width (only vertical scrollbar)" );
Expand All @@ -344,29 +345,30 @@ QUnit.test( "Resizable with scrollbars, a transform and box-sizing: content-box"

$( "<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";
// Both scrollbars
var widthBefore, heightBefore,
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();
widthBefore = element.innerWidth();
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.
// Single (vertical) scrollbar.
elementContent.css( "width", "50px" );

testHelper.drag( handle, 10, 10 );
Expand Down
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