Opened 13 years ago
Last modified 10 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
comment:3 Changed 11 years ago by
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:5 Changed 10 years ago by
Milestone: | TBD → 2.0.0 |
---|
comment:7 Changed 10 years ago by
Keywords: | haspatch added |
---|---|
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/.
comment:8 Changed 10 years ago by
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
Error reproduced here:
http://jsfiddle.net/RKPdZ/