Jquery Dialog Overlay problem when dialog is bigger than page content

Jquery Dialog Overlay problem when dialog is bigger than page content

I'm stuck at a problem and I don't know the answer.

After a lot of debugging I figured out what went wrong, but I don't know the answer.

When I use a basic Dialog, set modal to true and the content of the dialog is bigger than my viewport, the overlay isn't calculated correctly.

The height is wrong, therefore I get a vertical scrollbar. My guess is that since I have suddenly a vertical scrollbar I also get a horizontal scrollbar.

I tried a clean html file with only standard css and js files from the jQuery library, but still the same error. So it isn't my own css fault.

I've run the following tests:

Opera 10 -> overlay does not expand, dialog misplaced, to far to the top. Can't read content
IE 8 -> like expected, but with horizontal scrollbar
IE 7 -> perfect
Firefox 3.6 -> vertical and horizontal scrollbars, overlay does not expand to bottom of page

After I move, or resize the problems go away in all browsers, except IE8, still horizontal scrollbar. I guess the dialog plugin reinitializes at that moment. So it seems that it's setting the overlay before generating the content. Switching those should do the trick, but I don't know where to change the code.


Example code:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript">
    $(function() {
            $( "#dialog" ).dialog({modal:true});
    });
    </script>

    <link href="css/jquery-ui-1.8.5.custom.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
        <br />
    <br />
    <!-- insert some dummy text, as long as the dialog is bigger than your viewport -->
    </div>

    </body>
    </html>