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.

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
Prev Previous commit
Next Next commit
Changed element size calculations.
  • Loading branch information
Daniel-Garmig committed Aug 25, 2024
commit 4ad61c974c4657355bd9ce37d0ca0fab12c9883c
35 changes: 20 additions & 15 deletions ui/widgets/resizable.js
Original file line number Diff line number Diff line change
Expand Up @@ -711,31 +711,36 @@ $.widget( "ui.resizable", $.ui.mouse, {
}

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

if ( elWidth === "" ) {
elWidth = this._getElementSizeWithoutOverflow( element, "width" );
}
if ( elHeight === "" ) {
elHeight = this._getElementSizeWithoutOverflow( element, "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
};
},

_getElementSizeWithoutOverflow: function( element, sizeProperty ) {
var overflowProperty = sizeProperty === "width" ? "overflow-y" : "overflow-x";
_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

var origOverflow = element.css( overflowProperty );
element.css( overflowProperty, "hidden" );
var elSize = parseFloat( element.css( sizeProperty ) );
element.css( overflowProperty, origOverflow );
// If offsetWidth/offsetHeight is unknown, then we can't determine theoretical size.
// Use an explicit zero to avoid NaN (gh-3964)
) ) || 0;

return elSize;
return size;
},

_proportionallyResize: function() {
Expand Down