1

I want to keep a jquery UI dialog in a fixed position (with respect to content) even if that means it opens outside the browser window. I'm able to control the positioning until the dialog hits the edge of the window, but there appears to be some kind of offset control that is keeping it from opening offscreen.

I'm successfully using this solution for the same issue with datepicker: How to control positioning of jQueryUI datepicker

I wonder if a similar fix is possible for dialog (I tried the obvious change - replacing "datepicker" with "dialog" - doesn't work).

Many thanks.

Community
  • 1
  • 1
John
  • 11
  • 1
  • 3

2 Answers2

0

add the following setting to the dialog.

dialogClass: "dialog-fixed"

in your css declare the class as follows.

.dialog-fixed
{
position:fixed !important;
}

that works for me... as per jquery 2.1.1 and jquery ui 1.11.2

Abdul Basit
  • 712
  • 2
  • 19
  • 37
0

I had the same challenge which I managed to fix by using Fixed CSS positioning. Initialize the dialog on page load (with autoOpen: false) and then when you want the dialog to be displayed:

$('#dialogContent').parent().css('position', 'Fixed').end().dialog('open');
Jimbo
  • 22,379
  • 42
  • 117
  • 159
  • 3
    I find it better to run this logic in the create event, so that you can call the standard .dialog('open') elsewhere, without having to run this hack each time... `$('#metadata').dialog({ create: function (event) { $(event.target).parent().css('position', 'fixed'); });` – Langdon Jan 26 '12 at 14:54