jQuery - Dialog auto-resize on dynamic content and

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 content, the size of the data is unknown. So, When I get large data, the dialog grows only in the bottom side i.e. The dialog expands in the bottom, and the top is still in the same position.

What I want is

When the data is loaded, the dialog should expand in both the direction (top and bottom ), so that the content is visible without scrolling.

Answer 1

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 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

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"
    });

Answer 4

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 5

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");
});