JQuery - Dialogue auto-resize dynamic content and maintain center position

Question

I have a jQuery dialog and upload content using Ajax.

The dialog is initially in the center of the page. The problem here is that since its dynamic content, the size of the data is unknown. So, when I get big data, the dialogue grows only at the bottom, that is, the dialogue expands at the bottom, and the top is in the same position.

I want

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

Answer 1

The default dialog is absolutely relative.

The dialog may expand to provide automatic height , but when the page scrolls, the dialog is rebuilt.

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

• Place the dialog in the window

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

• Fix position with css style

  .fixed-dialog { position:"fixed" }

• Add this class to the dialog.

  dialogClass : 'fixed-dialog'

So the dialogue will look like

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

Answer 2

None of the answers I found on the Internet satisfied me while I looked at the solution. Not even that. After reading a lot more about the jQuery API documentation, I found something really interesting . As described on this web page, you can bind an event in which it will be executed after the ajax request is executed. The fact is that it is not just like this; Since I was doing my own tests using the example provided in the API documentation, I could not get it to work. It seems that my jQuery dialog did not exist in the context of the “future”.

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

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

And voila! It works great! After executing the ajax request, the position property changes and adapts to the contents of the div and its size!

Hope this helps people in the future!

EDIT: you can use the function .on () instead of .live (). Since I wrote my answer, it seems that the ".live ()" function has been removed in jQuery version 1.9 and replaced with a new one. A more suitable solution for jQuery> = 1.9 users would look something like this:

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

Answer 3

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

order should be the same

Answer 4

I am using this 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 }); }