#5651 open bug ()

Opened May 24, 2010 01:15PM UTC

Last modified December 11, 2012 06:36AM UTC

Resizable: destroy method enlarges elements

Reported by: michal Owned by:
Priority: major Milestone: 2.0.0
Component: ui.resizable Version: 1.8.1
Keywords: haspatch Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (8)

Changed September 22, 2011 05:26PM UTC by chubas comment:1

Error reproduced here:

http://jsfiddle.net/RKPdZ/

Changed May 07, 2012 01:19PM UTC by scottgonzalez comment:2

#8299 is a duplicate of this ticket.

Changed May 07, 2012 02:26PM UTC by rhensel comment:3

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').

Changed October 11, 2012 06:48PM UTC by scottgonzalez comment:4

#7400 is a duplicate of this ticket.

Changed October 11, 2012 09:07PM UTC by scottgonzalez comment:5

milestone: TBD → 2.0.0

Changed October 16, 2012 05:46PM UTC by kenjiyamamoto comment:6

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

Changed October 27, 2012 12:33AM UTC by tj.vantoll comment:7

keywords: → haspatch
status: new → open
summary: destroy method bug on some bordered elements → Resizable: destroy method enlarges elements

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

Changed December 11, 2012 06:36AM UTC by arvindxyz comment:8

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/