#15213 new bug ()

Opened June 29, 2017 02:39AM UTC

Last modified June 29, 2017 03:06AM UTC

alsoResize on element which has padding

Reported by: huang-x-h Owned by:
Priority: minor Milestone: none
Component: ui.resizable Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

When set element resizable, and set alsoResize on it's children node which has padding value

Then resize the element, the alsoResize element will always wrong

see the jsbin example https://output.jsbin.com/betofej

see the source code

https://github.com/jquery/jquery-ui/blob/master/ui/widgets/resizable.js#L1036-L1042

$( o.alsoResize ).each( function() {
			var el = $( this );
			el.data( "ui-resizable-alsoresize", {
				width: parseFloat( el.width() ), height: parseFloat( el.height() ),
				left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) )
			} );
		} );

https://github.com/jquery/jquery-ui/blob/master/ui/widgets/resizable.js#L1057-L1071

$( o.alsoResize ).each( function() {
				var el = $( this ), start = $( this ).data( "ui-resizable-alsoresize" ), style = {},
					css = el.parents( ui.originalElement[ 0 ] ).length ?
							[ "width", "height" ] :
							[ "width", "height", "top", "left" ];

				$.each( css, function( i, prop ) {
					var sum = ( start[ prop ] || 0 ) + ( delta[ prop ] || 0 );
					if ( sum && sum >= 0 ) {
						style[ prop ] = sum || null;
					}
				} );

				el.css( style );
			} );

jQuery method width/height get the content width/height do not include padding, so we should use outerWidth/outerHeight

Attachments (0)
Change History (1)

Changed June 29, 2017 03:06AM UTC by rjollos comment:1

description: When set element resizable, and set alsoResize on it's children node which has padding value \ \ Then resize the element, the alsoResize element will always wrong \ \ see the jsbin example https://output.jsbin.com/betofej \ \ see the source code \ \ https://github.com/jquery/jquery-ui/blob/master/ui/widgets/resizable.js#L1036-L1042 \ \ ```js \ $( o.alsoResize ).each( function() { \ var el = $( this ); \ el.data( "ui-resizable-alsoresize", { \ width: parseFloat( el.width() ), height: parseFloat( el.height() ), \ left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) ) \ } ); \ } ); \ ``` \ \ https://github.com/jquery/jquery-ui/blob/master/ui/widgets/resizable.js#L1057-L1071 \ \ ```js \ $( o.alsoResize ).each( function() { \ var el = $( this ), start = $( this ).data( "ui-resizable-alsoresize" ), style = {}, \ css = el.parents( ui.originalElement[ 0 ] ).length ? \ [ "width", "height" ] : \ [ "width", "height", "top", "left" ]; \ \ $.each( css, function( i, prop ) { \ var sum = ( start[ prop ] || 0 ) + ( delta[ prop ] || 0 ); \ if ( sum && sum >= 0 ) { \ style[ prop ] = sum || null; \ } \ } ); \ \ el.css( style ); \ } ); \ \ ``` \ \ jQuery method `width/height` get the content width/height do not include padding, so we should use `outerWidth/outerHeight` → When set element resizable, and set alsoResize on it's children node which has padding value \ \ Then resize the element, the alsoResize element will always wrong \ \ see the jsbin example https://output.jsbin.com/betofej \ \ see the source code \ \ https://github.com/jquery/jquery-ui/blob/master/ui/widgets/resizable.js#L1036-L1042 \ \ {{{#!js \ $( o.alsoResize ).each( function() { \ var el = $( this ); \ el.data( "ui-resizable-alsoresize", { \ width: parseFloat( el.width() ), height: parseFloat( el.height() ), \ left: parseFloat( el.css( "left" ) ), top: parseFloat( el.css( "top" ) ) \ } ); \ } ); \ }}} \ \ https://github.com/jquery/jquery-ui/blob/master/ui/widgets/resizable.js#L1057-L1071 \ \ {{{#!js \ $( o.alsoResize ).each( function() { \ var el = $( this ), start = $( this ).data( "ui-resizable-alsoresize" ), style = {}, \ css = el.parents( ui.originalElement[ 0 ] ).length ? \ [ "width", "height" ] : \ [ "width", "height", "top", "left" ]; \ \ $.each( css, function( i, prop ) { \ var sum = ( start[ prop ] || 0 ) + ( delta[ prop ] || 0 ); \ if ( sum && sum >= 0 ) { \ style[ prop ] = sum || null; \ } \ } ); \ \ el.css( style ); \ } ); \ }}} \ \ jQuery method `width/height` get the content width/height do not include padding, so we should use `outerWidth/outerHeight`