jQuery UI Dialog positioning

Question

Basically I would like the dialog to remain centered when resizing the window (or switching to full screen window).

Also the dialog is draggable, and ideally I'd prefer if it remained in it's dragged position on the page when resizing the window. But if it resets back to the center then I would settle for that too.

I tried setting "position: relative" on the ".ui-dialog" class, however this produces a big empty gap at the bottom of the page; I have been unable to figure out what is causing this using the DOM inspector tools.

Answer 1

You can do it like this:

$("#dialog").dialog({
    drag: function() {
        $.data(this, 'dragged', true);
    },
    open: function() {
        $.data(this, 'dragged', false);        
    }
});
$(window).resize(function() {
    $(".ui-dialog-content").each(function() {
        if(!$.data(this, 'dragged'))
            $(this).dialog('option', 'position', 'center');
    });
});

You can try out a demo here, this re-centers the dialog on window.resize only if you haven't dragged it since it was open. When we open, we set a the data for dragged to false, if we drag it, set it to true...and if it's still false (hasn't been dragged yet), the re-center happens, otherwise we leave it alone in it's current position.

Good question/idea on the dragging detection by the way, this would improve an application I'm currently working on, going to use this myself :)