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

Answer 2

I looked over the documentation and apparently you are able to achieve this with using CSS and changing the overflow value.

http://jsfiddle.net/vnVhE/1/embedded/result/

As you can see the CSS applied is:

// disable scrolling in the other panes
.ui-layout-pane-north ,
.ui-layout-pane-west,
.ui-layout-pane-south {
    overflow: hidden !important;
}

.ui-layout-layout-center {
    overflow: auto
}

NOTE: Please keep in mind while this allows horizontal scrolling it is a bit tricky and hackish at best in my opinion. Under Chrome I could scroll just fine if I held the mouse near the edge of the vertical scroll bar and it moved properly.