Auto resize width and height with jQuery dialog

Question

I am using jQuery UI dialog to load ajax content. It is correctly positions the dialog vertically, however, with width: "auto" option it does not center it horizontally. It is off-centered, like 100px to the right of center.

Here is my code:

$('.open').live('click', function(e) {
    e.preventDefault();
    $("#modal").load($(this).attr('href')).dialog({
        title: $(this).attr('title'),
        modal: true,
        autoOpen: true,
        draggable: false,
        resizable: false,
        width: 'auto',
        position: ['center', 'top']
    });
});

Any ideas if there's a way to have it auto resize and remain centered?

EDIT: This works:

$("#modal").load($(this).attr('href'), function() {
    $("#modal").dialog({
        title: $(this).attr('title'),
        width: 'auto',
        modal: true,
        autoOpen: true,
        draggable: false,
        resizable: false,
        position: ['center', 150],
        create: function(event, ui) {}
    });
});

Answer 1

To avoid positioning problems, you should wait for the content to load before creating or opening the dialog. Otherwise:

1. jQuery UI dialog will calculate the width and center of the empty div
2. When the content loads, the right side of the dialog stretches to accomodate the content while the left side remains fixed, causing the dialog to appear shifted towards right

Your sample code should be changed to this:

$("#modal").load("/ajax/content.html", function() {
  // callback is executed after post-processing and HTML insertion has been performed
  // this refers to the element on which load method was called
  $(this).dialog({
    modal: true,
    autoOpen: true,
    draggable: false,
    resizable: false,
    width: "auto",
    position: { my: "top", at: "top", of: window }
  });
});