1

I have a standard jquery-ui dialog created with $("#element").dialog(); and I'm trying to find the best way of containing it within the bounds of another element.

I'm trying to avoid doing it just with javascript and re-positioning it because I'd like to be able to move it outside the bounds of the container, and for the container to be able to scroll using #container {overflow:auto;}

Here's a fiddle of the situation: http://jsfiddle.net/Z4xAA/ - I'm trying to contain #myDialog within the bounds of #dialogContainer

I've tried doing this to move the dialog.parent to the container element - but to no avail.

Any idea how I'd go about this?

Edit: I was playing around with the fiddle, and found that if I moved the dialog into the container element myself via the webkit debugger it behaved as desired. Now it's just a matter of doing that programatically.

Jason C
  • 38,729
  • 14
  • 126
  • 182
PhonicUK
  • 13,486
  • 4
  • 43
  • 62
  • 1
    This doesn't solve the problem. All that does is set the bounds the dialog can be moved within. But I want it to be properly contained within the element so it can be partially obscured and the parent element scrolling. – PhonicUK Aug 28 '12 at 15:02

1 Answers1

2

Using .append() moves the element properly. Doing it on the .parent() of the dialog to the container gives the desired result.

$("#dialogContainer").append($("#myDialog").parent());

Updated fiddle at http://jsfiddle.net/Z4xAA/7/

All that needs doing after that is repositioning the dialog if needed to stop it being above the top of the element.

PhonicUK
  • 13,486
  • 4
  • 43
  • 62