Question

i have this structure of DIVs

<div id="container">
   <div="outer">
      <div id="inner">
      </div>
   </div>
</div>

and i made the ‘outer’ div resizable() using this jqueryUi

$("#outer").resizable({ containment: 'parent', alsoResize: "#inner"  });

till now every thing is OK!

//////////////// the issue /////////////////

When i resize the outer it resize the inner with it but when it reaches the ‘container’ div it STOPS which is OK but the inner keep resizing with the mouse moving and exceed the ‘container’ and the ‘outer’ DIVs!!!!

can i make the ‘inner’ ALSO STOPS with the ‘outer’ when it reaches the ‘container’ div limits????

Thank You in advance, i know you can help 🙂

Answer 1

You can solve this issue by setting maxHeight and maxWith for your container.

$("#outer").resizable({
    alsoResize: '#inner',
    containment: 'parent',
    maxHeight: 500,
    maxWidth:500
});

Check working example at http://jsfiddle.net/WV2nn/