Resizable: destroy method enlarges elements

[michal]

Calling destroy method of resizable component on elements that needs to be wrapped with div.ui-wrapper while resizing (eg. img, canvas) is making that elements bigger, when element that we're working on has a border.

Destroy method gets outer size of wrapper(with is actually size of resized element+border of that element) and sets it to inner size of selected element.

[chubas]

Error reproduced here:

​http://jsfiddle.net/RKPdZ/

[Scott González]

#8299 is a duplicate of this ticket.

[rhensel]

The border of the element is not the cause of the bug. Changing the input's border to zero width still enlarges the input on resizable('destroy').

[Scott González]

#7400 is a duplicate of this ticket.

[kenjiyamamoto]

Pull request at ​https://github.com/jquery/jquery-ui/pull/765

[tj.vantoll]

Verified this is still an issue in 1.9.1 - ​http://jsfiddle.net/tj_vantoll/E7xDy/.

[arvindxyz]

workaround:

//variable to store resizable object
var resizedImage = null;
//img is the element that is resized
var OriginalImg = $('img');
//make it resizable
resizedImage = OriginalImg.resizable();

//before destroy
        var p = $(resizedImage).css('position');
        var w = $(resizedImage).innerWidth(); //take the inner width
        var h = $(resizedImage).innerHeight(); //take the inner height
        var top = $(resizedImage).css('top');
        var left = $(resizedImage).css('left');

//destroy
        OriginalImg.resizable('destroy');

//restore original
        OriginalImg.css({
                position: p,
                width: w,
                height: h,
                top: top,
                left: left
            });

working example at

​http://jsfiddle.net/E7xDy/6/