I have tried following code, but it only positions dialogs left upper corner position to center, and that makes element to be aligned to right. How can I center dialog to real center which counts elements width, so that center line will cut dialog to 50% 50% halfs?
$('.selector').dialog({ position: 'center' });
This question is related to
jquery
jquery-ui
dialog
jquery-dialog
I had a problem with this and I finally figured this out. Until today I was using a really old version of jQuery, version 1.8.2.
Everywhere where I had used dialog I had initialised it with the following position option:
$.dialog({
position: "center"
});
However, I found that removing position: "center" or replacing it with the correct syntax didn't do the trick, for example:
$.dialog({
position: {
my: "center",
at: "center",
of: window
}
});
Although the above is correct, I was also using option to set the position as center when I loaded the page, in the old way, like so:
// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");
This was causing all of my dialog windows to stick to the top left of the view port.
I had to replace all instances of this with the correct new syntax below:
passwordDialogInstance.dialog(
"option",
"position",
{ my: "center", at: "center", of: window }
);
open: function () {
var win = $(window);
$(this).parent().css({
position: 'absolute',
left: (win.width() - $(this).parent().outerWidth()) / 2,
top: (win.height() - $(this).parent().outerHeight()) / 2
});
}
According to the following discussion, the problem could be due to less IE compatibility in the newer jQuery versions, reverting back to 1.7.2 seems to resolve the problem, which only occurs in IE8. http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8
You also need to do manual re-centering if using jquery ui on mobile devices - the dialog is manually positioned via a 'left & top' css property. if the user switches orientation, the positioning is no longer centered, and must be adapted / re-centered afterwards.
Are you running into this in IE only? If so, try adding this to the FIRST line of your page's HEAD tag:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
I had though that all compatibility issues were fixed in later jQueries, but I ran into this one today.
The latest jQuery UI has a position component:
$("#myDialog").position({
my: "center",
at: "center",
of: window
});
Doc: http://jqueryui.com/demos/position/
Get: http://jqueryui.com/download
Try this....
$(window).resize(function() {
$("#dialog").dialog("option", "position", "center");
});
Following position parameter worked for me
position: { my: "right bottom", at: "center center", of: window },
Good luck!
For Win7/IE9 environment just set in your css file:
.ui-dialog {
top: 100px;
left: 350px !important;
}
I fixed with css:
.ui-dialog .ui-dialog-content {
width: 975px!important;
height: 685px!important;
position: fixed;
top: 5%;
left: 50%;
margin:0 0 0 -488px;
}
I'm getting best results to put jQuery dialog in the center of browser's window with:
position: { my: "center bottom", at: "center center", of: window },
There's probably more accurate way to position it with option "using" as described in the documentation at http://api.jqueryui.com/position/ but I'm in a hurry...
Try this for older versions and somebody who don't want to use position:
$("#dialog-div-id").dialog({position: ['center', 'top'],....
Because the dialog need a position, You need to include the js position
<script src="jquery.ui.position.js"></script>
Another thing that can give you hell with JQuery Dialog positioning, especially for documents larger than the browser view port - you must add the declaration
<!DOCTYPE html>
At the top of your document.
Without it, jquery tends to put the dialog on the bottom of the page and errors may occur when trying to drag it.
So if anyone hits this page like I did, or for when I forget in 15 minutes, I'm using jqueryui dialog version 1.10.1 and jquery 1.9.1 with ie8 in an iframe(blah), and it needs a within specified or it doesn't work, i.e.
position: {
my: "center bottom",
at: "center top",
of: $("#submitbutton"),
within: $(".content")
}
Thanks to @vm370 for pointing me in the right direction.
If you are using individual jquery files or a custom jquery download either way make sure you also have jquery.ui.position.js added to your page.
Jquery UI 1.9.2, jquery and the later versions don' support IE8
I found two solutions for that.
Rollback to jquery UI 1.7.2 to support IE8,
Try this code with Jquery UI 1.9.2
position: {my: "center", at: "center", of: $("body"),within: $("body") }
I have to call function dialog() twice to position the dialog (jQuery v1.11.2 / jQueryUI v1.10.4).
$("#myDialog").dialog({
/* initial dialog parameters */
}).dialog({
position: {
my: "center center",
at: "center center",
of: window
}
});
Could not get IE9 to center the dialog.
Fixed it by adding this to the css:
.ui-dialog {
left:1%;
right:1%;
}
Percent doesn't matter. Any small number worked.
To fix center position, I use:
open : function() {
var t = $(this).parent(), w = window;
t.offset({
top: (w.height() / 2) - (t.height() / 2),
left: (w.width() / 2) - (t.width() / 2)
});
}
Source: Stackoverflow.com