부트 스트랩 모달의 잘못된 위치에 Datepicker가 표시됩니다.

데이트 피커가있는 모달을 호출하는 페이지에 버튼이 있습니다.부트 스트랩 모달의 잘못된 위치에 Datepicker가 표시됩니다.

이 버튼이 맨 위에 있으면 (클릭하여 페이지를 스크롤 할 필요가 없음) 모달이 열리고 datepicker가 올바르게 표시됩니다.

그러나이 단추가 페이지에서 더 낮아서 (클릭하여 페이지를 스크롤해야 함) 모달이 열리고 datepicker가 올바르지 않게 표시됩니다. (스크롤 관계를 가지고 있는지 확실하지 않습니다)

는 여기에서 날짜 선택기가 툴팁으로 위의 표시되어야합니다 이미지 표시 문제입니다,하지만 그것은 내려갑니다 : 이 enter image description here

여기에 코드입니다 :

<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#callModal">Contact</button> 

<div class="modal fade" id="callModal"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       <form role="form"> 
       <div class="form-group"> 
        <label for="name">Name</label> 
        <input type="text" class="form-control" id="name" placeholder="Enter name"> 
       </div> 
       <div class="form-group"> 
        <label for="contact">Contact</label> 
        <input type="text" class="form-control" id="contact" placeholder="Your mobile number"> 
       </div> 
       <div class="row"> 
        <div class='col-sm-6'> 
        <div class="form-group"> 
         <label for="cal">Date &amp; Time</label> 
         <div class='input-group date' id='datetimepicker1'> 
         <input type='text' class="form-control" id="cal"/> 
         <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span> 
         </span> 
        </div> 
        </div> 
        <script type="text/javascript"> 
       $(function() { 
        $('#datetimepicker1').datetimepicker(); 
       }); 
       </script> 
       </div> 
       </div> 
      </form> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-danger">Contact </button> 
      </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- /.modal -->

편집 을 DateTimePicker 도구 팁은 "연락처"버튼을 클릭하기 전에 페이지를 스크롤하는 양만큼 이동하여 datetimepicker가 포함 된 모달을 표시합니다.

출처

2015-01-15 Insane Coder

datetimepicker의 의도 된 동작이므로 "틀린 위치"라고 말하지는 않겠지 만 위 아래가 아닌 오른쪽에서 원하니? 현재'datepicker' 플러그인과 같이'orientation'을위한 옵션이 있다고 생각하지 않습니다. –

@ TimLewis : 아래에 오지 않습니다. 그것의 위치가 틀렸지 만 그렇지 않다면 툴팁처럼 날짜 표시 줄 상자가있는 화살표가 있었을 것입니다. –

음 ... 음, 나는 당신의 바이올린을 작동시킬 수 없습니다 ... 2 콘솔 오류 :'순간이 정의되지 않았습니다'와'$ (...). datetimepicker()는 함수가 아닙니다'. –

방금이 동일한 문제가 발생했습니다. div에 컨테이너 속성을 추가하여이를 해결할 수있었습니다.

$('#myDatePicker').datepicker({ 
    container:'#myModalId' 
});

또는 내가했다 당신은 "게으른로드"방법을 사용하는 경우 :

<input id='myDatePicker' data-provide='datepicker' data-date-container='#myModalId'>

참조 : http://bootstrap-datepicker.readthedocs.org/en/latest/options.html

는 다른 사람이 도움이되기를 바랍니다!

출처

2015-03-12 02:15:02 tjfo

나를 도울 솔루션을 찾고, 감사합니다 –

오버플로 함께 div 안에 경우이 문제를 해결해야합니다 : 스크롤? – mmcrae

질문이 datetimepicker가 아니라 datepicker 였기 때문에 대답이 유효하지 않습니다. –

이 문제와 관련된 문제는 코드 검사기 창이 열려 있기 때문에 나타났습니다. 일반 사용자는이 기능을 사용하지 않아야합니다. 그렇다면 문제가되지 않습니다.

출처

2016-08-01 19:18:06 Marcel

그건 이상하다. 어쩌면 반응성 문제 일까? –

Datetimepicker는 입력 컨테이너가 상대적으로 배치되지 않은 경우 잘못된 위치에 표시됩니다.

솔루션은 다음과 같습니다

내 경우

<div style="position:relative"> 
<div class='input-group date' id='datetimepicker1'> 
</div>

출처

2017-03-09 14:42:35

이것은 나를 도왔습니다. – Verthosa

날짜 선택기의 위치가 있었어야보다 60 픽셀 높았으며, 그 div 부모 중 하나가 있었기 때문에 :

~~margin-top: 60px;~~

대신

출처

2017-09-26 17:23:58

부트 스트랩 모달의 잘못된 위치에 Datepicker가 표시됩니다.

답변

관련 문제