Question

I’m using the position attribute to fix a dialog in a certain position.

$('#red').dialog({autoOpen: false, resizable: false, draggable: false, 
    height: 600, width:550, position: [10, 150]});

I find that if the browser window is too small, the dialog doesn’t pop up at (10, 150), but higher.

Is there a way to make sure it pops up at an absolute position regardless of the window size?

Answer 1

Looks like the dialog widget is trying to keep the dialog visible and overriding your position setting in the process. You could use the open event to force the issue. The structure of the dialog (without irrelevant classes and such) is like this:

<div class="ui-dialog">
    <div class="ui-dialog-titlebar"></div>
    <div id="red"></div>
</div>

so you could use an open handler like this:

open: function(event, ui) {
    var $dialog  = $(event.target);
    var position = $dialog.dialog('option', 'position');
    $dialog.closest('.ui-dialog').css({
        left: position[0],
        top:  position[1]
    });
}

Yes, it is a bit kludgy but it works and I don’t see anything in the API that allows you to control the dialog’s behavior when the dialog doesn’t fit in the viewable area.

Demo: http://jsfiddle.net/ambiguous/L9Deb/