Opened 18 months ago

Last modified 18 months ago

#15213 new bug

alsoResize on element which has padding

Reported by: huang.xinghui Owned by:
Priority: minor Milestone: none
Component: ui.resizable Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Ryan J Ollos)

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

Change History (1)

comment:1 Changed 18 months ago by Ryan J Ollos

Description: modified (diff)
Note: See TracTickets for help on using tickets.