Opened 9 years ago

Last modified 6 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 8 years ago by chubas

Error reproduced here:

http://jsfiddle.net/RKPdZ/

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

#8299 is a duplicate of this ticket.

comment:3 Changed 7 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 6 years ago by Scott González

#7400 is a duplicate of this ticket.

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

Milestone: TBD2.0.0

comment:6 Changed 6 years ago by kenjiyamamoto

comment:7 Changed 6 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 6 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.