jQuery UI dialog box not positioned center screen

user_175562 0
Viewed 141053

I have a jQuery dialog box that is meant to position in the middle of the screen. However, it seems slightly off-center vertically.

Here is the code:

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

Any ideas why this won't center?

position dialog jquery-ui jquery
24 Answers

For me jquery.dimensions.js was the Culprit

user_6104070 
$('#dlg').dialog({
    title: 'My Dialog',
    left: (parseInt(jQuery(window).width())-1200)/2,
    top:(parseInt(jQuery(window).height())-720)/2,
    width: 1200,
    height: 720,
    closed: false,
    cache: false,
    modal: true,
    toolbar:'#dlg-toolbar'
});
user_144132810

I had to add this to the top of my HTML file: <!doctype html>. I did not need to set the position property. This is with jQuery 3.2.1. In 1.7.1, that was not needed.

user_22337060

I was upgrading a legacy instance of jQuery UI and found that there was an extension to the dialog widget and it was simply using "center" instead of the position object. Implementing the position object or removing the parameter entirely worked for me (because center is the default).

user_1527260

None of the above solutions worked for me. I will present below my scenario and the final solution, just in case someone has the same problem.

Scenario: I use a custom jQuery plugin to add a scroll bar to an HTML element that is located inside the Dialog box.

I used it as

$(response).dialog({
 create: function (event, ui) {
  $(".content-topp").mCustomScrollbar();
 })
});

The solution was to move it from create to open, like this:

$(response).dialog({
 open: function (event, ui) {
  $(".content-topp").mCustomScrollbar();
  $(this).dialog('option', 'position', 'center');
 })
});

So, if you use any custom jQuery plugin that manipulates the content then call it using the open event.

user_35381090

Solved... Solution of this problem is missing declaration <!doctype html> in HTML code. If you have not this declaration there. Vertial centering of JQuery UI dialog were not working correctly.

user_10961290
Related