Question

我是jQuery的新手，我正在尝试使用它。我一直在尝试使用jQuery UI Datepicker。在大多数情况下似乎工作正常。但是，我发现Datepicker的定位似乎出错了，即当父体CSS指定时，它出现在屏幕右侧而不是文本输入的正下方：

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

但是，从body的CSS中删除width属性，一切正常 - datepicker出现在文本输入字段的正下方。

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

因此，似乎添加width属性会导致datepicker位于文本区域的右侧。我查看了firebug中的CSS，发现datepicker已经选择了一些内联样式：

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

我想这是在jQuery UI datepicker js的内部创建的。

以前有人遇到过这个吗？如果是这样，那么我可以做什么（除了不指定体宽）以确保日期选择器出现在正确的位置？

完整的HTML如下：

<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>

Answer 1

您可能需要考虑在jqui的选择器之后直接调整日期选择器

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

我认为由于某种原因，日期选择器可能正在拾取身体的css。

还要记住“！important”属性。如果必须，请使用它。这将覆盖任何继承的css规则。

e.g。

#thing {color:#000000 !important}

Answer 2

jQuery和jQuery UI不支持HTML或BODY元素的大小和位置设置。请参阅http://bugs.jqueryui.com/ticket/7170

jQuery UI datepicker定位

2 个答案: