jQuery - Dialog auto-resize on dynamic content and maintain center position

Question

I have a jQuery Dialog box and Am loading the content using Ajax.

The Dialog is initially in the center of the page. The problem , here is , Since its a dynamic con

Answer 1

None of the answers I found on the internet satisfied me while I was looking at the solution. Even this one doesn't. After reading a lot more about the JQuery API documentation, I found something really interesting. As this web page describe, you can bind an event in which it will be executed after the ajax request has done its job. Thing is, it's not simple as this; As I was doing my own tests, using the example provided in the API documentation, I couldn't make it to work. It seems like my JQuery dialog didn't exist in a "future" context manner.

This led me to this page which description was: Attach an event handler for all elements which match the current selector, now and in the future. Finding this leads me to create a function like this one:

$(document).live("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});

And voila! It works like a charm! After the ajax request is done, the position property is changed and adapted to the content of the div and its dimensions!

Hope it helps people in the future!

EDIT: You might want to use the function ".on()" instead of ".live()". Since the time I wrote my answer, it seems like the function ".live()" as been removed in version 1.9 of jQuery and replaced by the new one. A more appropriate solution for users of jQuery >= 1.9 would be something like this:

$(document).on("ajaxStop", function (e) {
      $(".myDiagDiv").dialog("option", "position", "center");
});

Answer 2

 Use this
    modal: true,
    width: '80%',
    autoResize:true,
    resizable: true,
    position: {
        my: "center top", 
        at: "center top", 
        of: window
    }

order must be same

Answer 3

Positioning was fine before I moved dialog content to ajax source, after which positioning was a problem. The below worked for me today.

$('#formdialog').dialog({autoOpen: false, modal: true, title:'Dialog Title',  
    position: {
    my: "center top", 
    at: "center top+50", 
    of: window
}});

Note that the '+50' is "50px down from the top" and works whether adding to the "my" or "at" line. Spaces not permitted. For example: "center top + 50" will not work.

See more info in documentation option-position

Answer 4

I was looking for a simple solution and realized that my graph wasn't finished "drawing" before opening the dialog so I enclosed the .dialog('open') command in a setTimeout function.

setTimeout(function () {
    $('#pie-Admin-Summary-dialog').dialog('open');
}, 500);

You can play with the timing. I opted for 1/2 second.

Answer 5

I use that function:

function centerDialog(id){

  var d = $('#'+id).closest('.ui-dialog'),
      w = $(window);

  d.css({

    'top':(w.height()-d.outerHeight())/2,
    'left':(w.width()-d.outerWidth())/2

  });

}

Answer 6

The default dialog is absolutely relative positioned.

The dialog may expand on giving auto height, but when the page is scrolled , the dialog is reposition itself.

The only way to do this is, apply these styles to the dialog

1. Position the dialog in the Window by

   position : ['center',<distance from top>]

2. Fix the position by using css style

   .fixed-dialog { position:"fixed" }

3. Add this class to the dialog

   dialogClass : 'fixed-dialog'

So, the dialog would look like

$('#dialog-div').dialog({
        position : ['center',10],
        dialogClass: "fixed-dialog"
    });