How to make nested layouts with jquery-layout resizable?

Question

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?

Answer 1

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