jQuery UI Layout and Constraining Dialogs to the Central Pane

Question

I am trying to create a full page interface using the excellent jQuery UI Layout plugin.

I want the central pane to hold multiple dialogs and allow them to be contained within that pane. So far so good. However, I also want to be able to drag the dialogs "out of the way", and move them to the right or bottom so that the central pane develops scroll bars and allows the central pane to act as a scrollable desktop for dialog boxes. I want the other pane(s) to be always there for other UI purposes.

HTML:

<div class="ui-layout-center">
    <div id="dialog1">dialog 1</div>
    <div id="dialog2">dialog 2</div>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-west">West</div>

jQuery:

$('body').layout(
{ 
    applyDemoStyles: true,
    livePaneResizing : true
});

var dialog1 = $("#dialog1")
    .dialog({})
    .parent().appendTo( $(".ui-layout-center") );

dialog1.draggable( "option", "containment", $(".ui-layout-center") );

$("#dialog2")
    .dialog({})
    .parent().appendTo( $(".ui-layout-center") );

As you can see, it almost works, but the scrolling doesn't work horizontally. I've experimented with containing dialog1 but this makes things worse! Perhaps it's just a CSS issue or that combined with a setting. Any ideas?

jsFiddle

Answer 1

The solution turned out to me a case of manipulating the underlying draggable of the dialog box:

$("#dialog2").dialog("widget").draggable(
{
    containment : [ 0, 0, 10000, 10000 ], 
    scroll: true, 
    scrollSensitivity : 100
});

Obviously, these values can be played with to achieve different results. I hope this helps anyone else in the same position!

jsFiddle