The dialog not always appears in the center/bottom vertically. Workaround supplied.

[MindStorm]

I have the following code

$.ui.dialog.defaults.bgiframe = true;

$(document).ready(function(){
	$("#dialog-box").dialog({
		width: 700,
		autoOpen: false,
		modal: true,
		position: ['center','middle']
	});
});

function show_dialog(params)
{
	$("#dialog-box").load(
		"http://examle.com"
		{ params: params},
		function() {
			$("#dialog-box").dialog("open");
		});
}

When the funcion show_dialog is called many times and the heigth of the content (obtained from ajax) is variable, p.e. content have images in different heights: the dialog appears a little below of the middle or a little below of the bottom of the visible page, surpassing the limits of the window. Tested on Firefox 3.0.5 and Internet Explorer 7.

I can't figure out the cause of this behavior yet. Maybe an ajax related issue or the sizing/positioning calculations is missing someting.

But a temporal workaround to avoid this behavior is to use the setTimeOut() function when open the dialog:

setTimeout(function(){ $("#sociales-dialogo").dialog("open"); }, 100);

The ideal situation is avoiding the setTimeOut, but setting it at 100 - 150 milliseconds will be imperceptible in the meanwhile. I hope that this bug is fixed in the next realease.

I will try to upload an example about this bug later.

[MindStorm]

I chose the improper component. I chose ui.core instead of ui.dialog. Sorry for the mistake.

[MindStorm]

I found what's causing bad positioning. When the content has images with various heights and are loaded for first time, it causes a miscalculation because the image is not completely loaded yet.

I fixed the problem by adding the heights and width of the images (with CSS or with the attributes of img tag). You no longer need to use setTimeout.

[Scott González]

As noted by the reporter, the dialog is positioned properly and the size of the content changes after it has been shown.