2011-12-09 2 views
0

저는 jQuery를 처음 사용하고 있으며,이를 사용하기위한 첫 번째 임시 조치를 취하고 있습니다. 나는 jQuery UI Datepicker을 사용하여 손을 잡고있다. 대부분의 경우 제대로 작동하는 것 같습니다. 그러나, 나는이 날짜 선택기의 위치가 부모 몸 CSS가 지정하는 대신 즉시 텍스트 입력 아래의 화면의 오른쪽에 나타납니다 즉 잘못 것으로 보인다 것으로 나타났습니다 :jQuery UI datepicker positioning

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

을하지만, 제거 너비 특성을 본문 CSS에서 모든 일을 잘 - datepicker 텍스트 입력 필드 바로 아래에 나타납니다. 폭 특성의 첨가는 날짜 선택기가 텍스트 영역의 오른쪽에 위치되게되는 경우로서

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

그래서 그것은 나타난다. 나는 불을 지르고에서 CSS 보았고 날짜 선택기 일부 인라인 스타일을 포착 한 것으로 나타났습니다 :

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

나는 이것이 jQuery를 UI의 날짜 선택기의 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> 
+0

신체에 상대적 위치를 두었습니까? 내게는 매우 이상한 것 같습니다 ... – ptriek

+0

이 문제를 재현 할 수없는 jsfiddle을 만들었습니다 ... – ptriek

+0

몸에있는 자식 요소가 상대 위치 지정을 상속 받길 원했습니다 (나는 CSS 전문가가 아닙니다.). 위치를 제거하더라도 : body에서 상대적으로 CSS는 이것을 수정합니다. 나는 위치를 제거하는 것으로 갈 것입니다 : body CSS로부터의 상대적 위치와 그것을 child 요소에 두는 것 (단순화 된 예제보다 더 많은 자식 요소들이 있습니다). –

답변

0

당신은 단지 날짜 선택을

예를 조정 jqui의 선택 직후에가는 고려할 수 있습니다 jQuery UI Datepicker: Align below label issue

나는 datepicker가 어떤 이유로 몸의 CSS를 집어 올 것 같아요.

"! important"속성도 기억하십시오. 필요한 경우 사용하십시오. 이것은 상속 된 CSS 규칙을 무시합니다.

#thing {color:#000000 !important}