Want to auto-resize jQuery UI.Layout's div width and height when resize the container of them using JQuery UI resizable!

Question

I am going to using jQuery UI.Layout Plug-in with JQuery UI resizable plugin.

the container layout example of JQuery UI layout plugin:

My code struct like this:

html code:

<div id="container">

    <div id="paddingWrapper" class="pane ui-layout-center">

        <div class="pane ui-layout-center">

            Center

            <p><a href="http://layout.jquery-dev.net/demos.html"><b>Go to the Demos page</b></a></p>

        </div>

        <div class="pane ui-layout-north">North</div>

        <div class="pane ui-layout-south">South</div>

        <div class="pane ui-layout-east">East</div>

        <div class="pane ui-layout-west">West</div>

    </div>

</div>

and the div id="container" will be attached with jquery ui resizable plugin and jquery ui draggable plugin.

the code attach layout Ui plugin:

$(document).ready(function () {

    $('#container').layout();

});

But it seems when I resize the div id="container",the layout was broken.the inner contents also preserve original with and height.So, I need a way to make the layout of inner could auto resize when I resize the container of them.

Thank you very much!!

Answer 1

I didn't know this layout plugin, but it seems pretty interesting... Thanks!

Check out the documentation of the layout, there's is a method called resizeAll() "Resizes the entire layout to fit its container". I don't really get the example they give, but I guess you might want to use it. Otherwise you can call this function from the stop event of the resizable:

$("#container").resizable({
  stop: function(){
    $("#paddingWrapper").layout("resizeAll");
  }
});