'jQuery UI datepicker positioning

I am very new to jQuery and am taking my first tentative steps in using it. I have been trying my hand using jQuery UI Datepicker. It seems to work fine in most cases. However, I have found that the positioning of the Datepicker seems to go wrong i.e. it appears on the right of the screen instead of immediately below the text input, when the parent body CSS specifies: 

body {
      margin-left: auto; 
      margin-right: auto; 
      position : relative;
      width : 777px;
      }

However, remove the width attribute from the body's CSS and everything works fine - the datepicker appears just below the text entry field. 

body {
      margin-left: auto; 
      margin-right: auto; 
      position : relative;
      }

So it appears as if the addition of the width attribute is causing the datepicker to be positioned to the right of the text area. I have looked at the CSS in firebug and found that the datepicker has picked up some inline styling:

element.style {
    left: 499.5px;
    position: absolute;
    top: 33px;
    z-index: 1;
}

I imagine that this is created somewhere in the bowels of the jQuery UI datepicker js.

Has anybody encountered this before? If so then is there anything I can do (apart from not specifying a body width) to ensure that the datepicker appears in the correct place?

The full html is below:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery Datepicker</title>

        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/start/jquery-ui.css" type="text/css"/>
        <style type="text/css">
        body {
            margin-left: auto;
            margin-right: auto;
            position: relative;
            width: 777px;
        }
        </style> 

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
       <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
       <script type="text/javascript">   
        $(document).ready(function () {                
            $( "#dateEntry" ).datepicker({ dateFormat: 'yy-mm-dd' });
        });
       </script>
    </head>
    <body>
       <p>Date: <input id="dateEntry" type="text"/></p>
    </body>
</html>
cssjquery-uidatepicker


Solution 1:[1]

You may want to consider just going right after jqui's selector to adjust the date picker

e.g. jQuery UI Datepicker: Align below label issue

I think the datepicker might be picking up the body's css for some reason.

Also remember the "!important" attribute. Use it if you must. This will override any inherited css rules.

e.g. 

#thing {color:#000000 !important}

Solution 2:[2]

jQuery and jQuery UI do not support size and position settings on the HTML or BODY elements. Refer to http://bugs.jqueryui.com/ticket/7170

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 gjtiger

Related Questions