jQuery UI: change resizable handles after init

Question

Consider an element is initialized with jQuery UI resizable widget

$(selector).resizable({handles:'se'});

And later the handles are changed

$(selector).resizable('option','handles','sw');

The result of console.log( $(selector).resizable('option',handles') ); shows sw
But it seems the resizable widget does not reflect with this change.

Is there a way to somehow refresh the resizable widget after such modification?

Answer 1

This is actually a bug in jQueryUI.

There is a workaround however (slightly hacky though):

Add the following class to your CSS:

.ui-hide-handler {
    width:0 !important;
    height:0 !important;
}

And remove the classes accordingly:

$('.ui-icon-gripsmall-diagonal-se', selector).addClass('ui-hide-handler');
$('.ui-resizable-sw', selector).addClass('ui-hide-handler');

So in your case:

$('.ui-resizable-handle', selector).addClass("ui-hide-handler");
$('.ui-resizable-sw', selector).removeClass('ui-hide-handler');