Question

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.

Answer 1

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.