Ticket #4053 (closed bug: notabug)
The dialog not always appears in the center/bottom vertically. Workaround supplied.
| Reported by: | MindStorm | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.6rc6 |
| Component: | ui.dialog | Version: | 1.6rc6 |
| Keywords: | dialog center | Cc: | |
| Blocking: | Blocked by: |
Description
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.
Change History
comment:2 Changed 4 years ago by 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.
comment:4 Changed 4 years ago by scott.gonzalez
- Status changed from new to closed
- Resolution set to invalid
- Component changed from ui.core to ui.dialog
- Milestone changed from 1.8 to 1.6rc6
As noted by the reporter, the dialog is positioned properly and the size of the content changes after it has been shown.


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