Refresh jquery ui dialog position

Question

I'm using a jquery dialog. The content of this dialog is dynamic so the height change when the dialog is open.

$("#a_div").dialog({ width: 400 });

The dialog initially appears center in the page. but when the height change is no more center.

How can i refresh the dialog's position without close and reopen it?

thanks

Answer 1

If you want to use the exact position settings as used by jquery ui for the initial positioning, you can grab the options from the jquery ui code and use them again any time you want to reposition your dialog.

function refreshDialogPosition(id) {
    $("#" + id).position({
                        my: "center",
                        at: "center",
                        of: window,
                        collision: "fit",
                        // Ensure the titlebar is always visible
                        using: function (pos) {
                            var topOffset = $(this).css(pos).offset().top;
                            if (topOffset < 0) {
                                $(this).css("top", pos.top - topOffset);
                            }
                        }
                    });
}

Use:

refreshDialogPosition("YourDialogId");

This will also make sure your title bar is always visible. Otherwise your title bar will be outside your screen when using dialogs with large content. (content height > window height)

Have a nice day.