CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-resizable
Travis
Travis

Reputation: 1

Nesting resizable elements

I am using jQuery UI's resizable for nested divs, like so:

<div id="resizable1">
   <div id="resizable2">
   </div>
</div>

I'm running into a problem where disabling resizable 1 also disables resizable 2. So, if I call the following...

$("#resizable1").resizable("disable");

...then I can no longer resize resizable2 either.

Has anyone else encountered this, and know of a way around this behaviour?

Thanks,

Travis

Upvotes: 0

Views: 1144

Answers (2)

naivedeveloper
naivedeveloper

Reputation: 2958

A little late, as I'm sure you've moved on, but I ran into the same issue. This is related to a known issue: http://bugs.jqueryui.com/ticket/5973

According to rdworth, you can do a workaround for this:

$("#resizable1").resizable("disable")
    .removeClass("ui-state-disabled ui-resizable-disabled")
    .children(".ui-resizable-handle").hide();

You can check out the original post at: http://forum.jquery.com/topic/trouble-with-nested-resizables, or check out the fiddle at: http://jsfiddle.net/rdworth/vaD8v/

Upvotes: 0

user740565
user740565

Reputation: 21

I was having trouble using nested resizables as well.. after setting up the second (nested) I lost the ability to resize the top level one.

To work around this I initialize, and destroy the nested one upon hover over/out:

$(".the-nested-elements").each(function() {
  $(this).hover(function() {
    $(this).resizable();
  },function() {
    $(this).resizable("destroy");                       
  });
});

It's not the most elegant solution, but it works.

Upvotes: 2

Related Questions