Its been long time, but there is a solution to this problem in case somebody read this.
You just need to set the maxWidth
or minWidth
(depends on what you want to do) inside the resize
to stop it from resizing.
You can do something like the following:
minWidth: 300,
start: function(event, ui) {
// get it once so we don't get it hundreds of time inside resize
this.enforcedMinWidth = $(this).resizable("option", "minWidth");
},
resize: function(event, ui) {
// use whatever conditions you want to stop here
// in my original case, i was checking its width vs neighbor and
// stops the resizing accordingly, so change it to fit your case
if (ui.element.next().width() <= this.enforcedMinWidth) {
$(this).resizable("option", "maxWidth", ui.size.width);
}
},
stop: function(event, ui) {
// reset
$(this).resizable("option", "maxWidth", null);
// cleanup
delete this.enforcedMinWidth;
}