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

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