Auto resize width and height with jQuery dialog
19,762
To avoid positioning problems, you should wait for the content to load before creating or opening the dialog. Otherwise:
- jQuery UI dialog will calculate the width and center of the empty div
- 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 }
});
});
Author by
David
Updated on June 15, 2022Comments
-
David almost 2 years
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) {} }); });