Opened 12 years ago

Last modified 9 years ago

#5651 open bug

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.

Change History (8)

comment:1 Changed 11 years ago by chubas

Error reproduced here:

http://jsfiddle.net/RKPdZ/

comment:2 Changed 10 years ago by Scott González

#8299 is a duplicate of this ticket.

comment:3 Changed 10 years ago by 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').

comment:4 Changed 10 years ago by Scott González

#7400 is a duplicate of this ticket.

comment:5 Changed 10 years ago by Scott González

Milestone: TBD2.0.0

comment:7 Changed 10 years ago by tj.vantoll

Keywords: haspatch added
Status: newopen
Summary: destroy method bug on some bordered elementsResizable: destroy method enlarges elements

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

comment:8 Changed 9 years ago by 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/

Note: See TracTickets for help on using tickets.