jQuery UI Dialog Centering Issue

Posted: December 16, 2012 in HTML, JavaScript
Tags: , , , , ,

I’m working with some code that’s been worked over many, many times over the years. It could a thorough scrubbing, but that’s not in the scope of my request.

I just upgraded the jQuery UI to version 1.9.2 and jQuery to 1.8.3 and added a simple dialog.

test_dialogIt was expected that the dialog would center itself to the browser window. However it appeared to be centering itself to the html element and scrolling the page to make it centered if the content was longer than the window height.

Here’s the code:

<html>
<head>
    <title>My Title</title>
</head>
<body>
    <div id="userNoticeDialog" style="display: none;" title="Notice">
        test content
    </div>

    <script type="text/javascript">
        $("#userNoticeDialog").dialog();
    </script>
</body>
</html>

After a process of elimination and seeing that there was no doctype declared, I tried adding a doctype. That resolved the issue.

<!DOCTYPE html>
<html>
<head>
    <title>My Title</title>
</head>
<body>
    <div id="userNoticeDialog" style="display: none;" title="Notice">
        test content
    </div>

    <script type="text/javascript">
        $("#userNoticeDialog").dialog();
    </script>
</body>
</html>

I believe the reason was the lack of a DOCTYPE caused the (Chrome) browser to go into quirks mode, while the inclusion of the DOCTYPE caused the (Chrome) browser to go into standards mode. However, I’m not sure how to detect which mode the Chrome browser is currently in. Does anyone know?

Advertisements
Comments
  1. Pawel says:

    Check document.compatMode – if it’s equal to ‘CSS1Compat’ then standard mode, otherwise quirks.

  2. hungkungfooey says:

    WOW So simple! I had my doctype as changed it to and it worked perfectly! Thank you for this! I can’t believe people are hacking it through css and x/y coord calculations

  3. hungkungfooey says:

    I was having issues with JQuery UI not centering, but was using <DOCTYPE html /> Once I changed it to <DOCTYPE html> it started working. I didn’t realize that your blog was filtering out html special chars in my first post…

  4. Roger says:

    WOW!!! This was a tough one… I’ve had this problem for weeks before I find your post… good job! thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s