CODEWITHSUNDEEP
jquery-uijquery-ui-resizablejquery-layout
Cristian Diaconescu
Cristian Diaconescu

Reputation: 35641

How to make nested layouts with jquery-layout resizable?

I'm trying to create a 4-pane layout using the jQuery-Layout plugin.

Really basic stuff:

The layout (note that I use iframes): 

<iframe class="ui-layout-center">Outer Center</iframe>
<iframe class="ui-layout-east">Outer East</iframe>
<div class="ui-layout-west ">
    <iframe class="ui-layout-south">Middle South</iframe>
    <div class="ui-layout-center ">
        <iframe class="ui-layout-center">Inner Center</iframe>
    </div>
</div>

The initialization: 

$(document).ready(function () {
    $('body').layout({
        west__childOptions: {
            center__childOptions: {
            }
        }
    });
});

Here's a fiddle.

Updated, simpler fiddle.

All is well until I try to resize the panes. It kinda works, but is very rough. When dragging the pane resizer handles it looks like they lose contact with the mouse pointer and stop resizing.

If the panes are simple divs, everything works, but not if the panes are iframes (which is what I need).

Any idea on how I could debug this?

Upvotes: 0

Views: 946

Answers (1)

Cristian Diaconescu
Cristian Diaconescu

Reputation: 35641

I have found the answer here

Basically, you need to mask each panel (and its parents, in case of nested panels) that contains an iframe.

Like this:

$('body').layout({
        center__maskContents:  true,
        west__maskContents:  true
});

Here's the working demo of the fiddle from the question: click

Upvotes: 1

Related Questions