4

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

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
  • arent you able to drag them without using draggables on them? I am in your fiddle and then dialog 1 behaves like 2 – Rooster Apr 24 '14 at 17:22
  • the `.draggable` forces containment of dialog1 on the central panel. dialog2 can be moved slightly off the panel, but it's not as I want. – Lee Taylor Apr 24 '14 at 18:08
  • hmmm. I see what you mean. I don't usually like recommending plugins but have you checked out http://ianli.com/infinitedrag/ ? – Rooster Apr 24 '14 at 20:25
  • Thanks. I'll have a look, but not sure it will work with a dialog. The demos appear to only drag when dragging the background... – Lee Taylor Apr 24 '14 at 20:32

2 Answers2

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

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
0

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.

Skewled
  • 783
  • 4
  • 12