$('.box').resizable({
  disabled: true
});

and here's the CSS

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

According to the docs, when disabled is true, the .ui-resizable-disabled class gets added to the element. In my case the classes does not get added but the resizing is still disabled (meaning I can't resize by dragging the handles, but when disabled is false I can resize). When I check the generated HTML, style="display:block" was added to the handles. I'm not doing any show hide on them.

<div class="ui-resizable-handle ui-resizable-e" style="display: block; ">...</div>

I'm using jQuery 1.8 from Google API. I'm also applying draggable to the same elements.

$('.box').resizable({
  disabled: true
});

and here's the CSS

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

According to the docs, when disabled is true, the .ui-resizable-disabled class gets added to the element. In my case the classes does not get added but the resizing is still disabled (meaning I can't resize by dragging the handles, but when disabled is false I can resize). When I check the generated HTML, style="display:block" was added to the handles. I'm not doing any show hide on them.

<div class="ui-resizable-handle ui-resizable-e" style="display: block; ">...</div>

I'm using jQuery 1.8 from Google API. I'm also applying draggable to the same elements.

• javascript
• jquery-ui
• jquery-ui-resizable

2 Answers 2

Looks like its a default behavior. You can not resize though there is a handler. Anyways, you could hide the handler as:

//Dirty hack
$('div.ui-resizable-handle').hide();

//Somewhat effective solution
$( "#resizable" ).resizable({ disabled: true, handles: 'e' });

Demo : http://jsfiddle/codef0rmer/W7HQ9/

you can just hide the handle as below, this will only remove the handle image and you could still do the re-size..

$("#yourelementid").find('.ui-icon').removeClass('ui-icon');