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

You need to re-set the position by doing:

$("#a_div").dialog({
    position: { 'my': 'center', 'at': 'center' }
});

The position is set once when creating the dialog, but can be altered afterwards (or just re-set at the same value, forcing jQuery to recalculate).

See this demo: http://jsfiddle.net/petermorlion/3wNUq/2/

Answer 2

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.

Answer 3

You can try to resize the dialog using its classes by JQuery directly (documentation here)

The basic structure of JQueryUI Dialog is this:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

So, maybe you should play with classes's width and height to set the best.

Another solution is to set dialog's width directly before open (when your data is successfully loaded):

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

$.get('my_url.php',function(data){

   $('#a_div .ui-dialog').css('width','400px');

   // Or...

   $('#a_div').css('width','400px');
});

I hope it helps you.

Answer 4

Marked as Correct didn't work for me. It persists position once it opened. Following code will reset dialog position, every time you open/re-open it.

$dlg.dialog({
    open: function(event, ui) {
          // Reset Dialog Position
          $(this).dialog('widget').position({ my: 'center', at: 'center', of: window });
    }
});
$dlg.dialog('open');