How to center JQuery dialog box after browser resize

Question

What I'm trying to do: When my browser is maximized and I open the JQuery dialog, it opens it in the center as expected. However when I resize the browser to be slightly smaller than the width of the dialog and then open the dialog, it always opens it left-justified. With a chunk of space on the right.

Code

$(document).ready(function() { 
     var dlg = '';

     dlg=$('#ticketDetails').dialog({
        title: 'TICKET DETAILS',
        resizable: true,
        autoOpen:false,
        modal: true,
        show:'fast',
        hide: 'fade',
        buttons:{ "Close": function() { dlg.dialog("close"); } },
        close: function(e, i) { dlg.hide(); },
        width:1250

     });

What I've tried:

$(window).resize(function() {
    $('#ticketDetails').dialog({position: ['center', 'center']});
});

I've read some of the answers and tried a few variations but nothing seems to work..

Further information:

http://jsfiddle.net/39GqM/479/

If you you scroll the bar in the middle all the way to the left and then run it you will notice that to view the dialog content on the right you need to drag it to the left by the title bar and only then the scroll bar will appear.

The following screen is when the browser is on full screen. As you can see the content fits perfectly: enter image description here

Now the page has been resized and then I've opened the dialog. As you can see its left-justified. There is no scroll-bar and the only way to get the scroll bar is to drag the dialog left (via the cursor that appears on the title) for the scroll bar to appear. This is the only way to see the content on the right (start of the paragraph/ title). enter image description here

What is the desired behaviour? How do you want to display a dialog box that is too wide for the window? Do you want it to be centered, with _both_ sides cut off? — tcovo, Mar 18 '13 at 00:21

score 3 · Accepted Answer · answered Mar 18 '13 at 19:12

I highly recommend using css media queries to achieve this and use a polyfill as a fallback if you support IE8 and lower.

Here is my solution on jsfiddle:

http://jsfiddle.net/39GqM/505/

    .ui-dialog {
      min-width: 80%;  
      width: 80% !important;
   } 
   @media only screen and (min-width: 1200px) {
     .ui-dialog {
        width: 1000px !important;
    } 
   }

   @media only screen and (max-width: 1000px) {
    .ui-dialog {
        min-width: 80%;  
        width: 80% !important;
    }
  }

So you will target the .ui-dialog class since jQuery-UI adds a bunch of markup to the DOM and I'm putting the !important rule to force the override. Do not add the dialog width when you call the widget, let the CSS handle that.

$("#dialog").dialog();

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

For older browsers fallback check this repo on github and do a window search for media queries: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Implementing polyfill are usually pretty straightforward but that should be a different question in my opinion. Hope it helps.

Cheers

Thanks. This might actually work. I'm not very savvy with media queries. Is there any way to set the minimum width for the dialog no matter how small the window resize becomes? — greenpool, Mar 19 '13 at 05:34
@greenpool actually that's what the first rule does, it by default sets the width to 80%, the code within the media queries only runs when the condition is matched. So if you wanted to have a fixed width you would change the 80% value you see in the CSS to that new width or better yet could add min-width: [x]px; in the first block and that would take care of it. Let me know if you want it added to the fiddle. Cheers — Ady Ngom, Mar 19 '13 at 07:13
Cheers. I believe I have now gotten into work the way I wanted it. thanks for the detailed answer! — greenpool, Mar 19 '13 at 08:10

Daniel · Answer 2 · 2013-03-18T02:38:36.787

I did this in a create statement inside the dialog options. It holds my dialog in teh middle of the screen.

create : function() {
             $(window).resize(function() {
                $("#myDialog").parent().position({ 
                                    my : "center",
                                    at : "center",
                                    of : window
                                    });
             });
             $(window).scroll(function() {
                $("#myDialog").parent().position({
                                   my : "center",
                                   at : "center",
                                   of : window
                                   });
             });
},

Where at the end of the dialog i chained the positioning function.

$("#myDialog").dialog({

 // do stuff
 // also add the positioning with "create"

}).parent().position({
     my : "center center",
     at : "center center+20",
     of : window
 });

fiddle: http://jsfiddle.net/djwave28/yf8fR/4/

Works well in jQuery UI - v1.12.1 – Asela Senanayake Dec 05 '16 at 06:13 — Asela Senanayake, Dec 05 '16 at 06:13

score 0 · Answer 3 · answered Feb 19 '13 at 09:59

0

Have you tried :

$(window).resize(function() {
    $("#ticketDetails").dialog("option", "position", "center");
});

answered Feb 19 '13 at 09:59

Vincent Decaux

9,857
6
56
84

score 0 · Answer 4 · edited May 23 '17 at 10:30

0

Edit

the solution is to upgrade the jQuery to version 1.8.6 or above + jQuery UI to version 1.9.2. apparently its a bug, and got fixed in newer versions.

same Example with upgraded jQuery: http://jsfiddle.net/39GqM/490/

you should try this

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

-> example <--

related question How to auto-center jQuery UI dialog when resizing browser?

edited May 23 '17 at 10:30

Community

1
1

answered Feb 19 '13 at 09:59

Iliya Reyzis

3,618
2
19
32

Thanks for that but try setting the `width` to something like 1000, run it on the full window and then minimize the window just enough to be smaller than the width of the dialog and you'll know what I mean. – greenpool Feb 19 '13 at 11:31
I'm running it on a dev machine so cannot share but please see edit. – greenpool Feb 19 '13 at 23:37
i red your "Further information" edit, and I understand what you are saying but i didnt understand what you wrote at the top -> "With a chunk of space on the right". I tested it in all kind of ways, and when you open jsfiddle, when its smaller that the dialog, the dialog is starting on the right side, and hiding the left side, is that what you meant? what are you trying to accomplish? make it re-sizable? – Iliya Reyzis Feb 20 '13 at 08:54
please see screenshot added. – greenpool Feb 21 '13 at 07:55

score 0 · Answer 5 · answered Mar 19 '13 at 09:30

The problem is caused by jQueryUI attempting to position yourfixed with dialog when it does not have enough available room - the collision logic. The collision default for a .dialog() is = fit.

"fit": Shift the element away from the edge of the window.

I tried with other collision options: flip, flipfit, none but since width="1000px" jQueryUI cannot find a good position for the dialog.

By giving the dialog a dynamic width and binding a window.resize() event, the dialog will always be 80% of the width of the document and always be repositioned to the center. See demo

CSS

.width-80 {
  width:80% !important;
}

JavaScript

var $dialog = $('#dialog');
$dialog.dialog({ dialogClass: 'width-80' });

$(window).resize(function() {
    $dialog.dialog('option', 'position', 'center');
});

HTML

<div id="dialog" title="Basic dialog">
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

How to center JQuery dialog box after browser resize

5 Answers5