How do I destroy a jquery resizable without destroying child resizables?

Question

I have a parent div which is resizable (width only) - within this div I have a number of other divs that are also resizable (height only).

At times I want to either disable or destroy the parent width resizing but leave the inner height resizing in place.

When I call $("#idTopDiv").resizable("destroy");, this destroys the resizables on all of the child divs as well.

Typical layout is:-

<div id=idDivTop> <!-- Resizable width -->
    <div id=idInnerOne>
    </div>

    <div id=idInnerTwo> <!-- Resizable height -->
    <div>
</div>

Appreciate any ideas.

Answer 1

I think this happens because the destroy of resizable removes all resize handels inside of the ui element, which happens to include the resize handles for the inside resizables. So the inside resizables aren't actually being destroyed, they're just getting messed up.

You can see the Resizable source code here; its happening at line 199 where it says .find('.ui-resizable-handle').remove();.

To fix this you need to call the destroy method on the inner resizables also and then recreate them. (jsfiddle)

$("div").resizable();

// Destroy all three resizables
$("div").resizable("destroy");

// Recreate the inner resizables
$("#idInnerOne, #idInnerTwo").resizable();

You need to do that to remove bindings and data that resizable sets up upon creation, otherwise it will think its already created when you try re-creating it and it will do nothing.

You might also consider disabling the outer resizable instead of destroying it, but that has its own issues.