오버 플로우가 설정된 경우 부트 스트랩 datetimepicker가 표시되지 않습니다.

Question

그래서 웹 사이트에서 사용자가 날짜와 시간을 설정할 수 있습니다. 내 작은 고정 팝업에서 부트 스트랩 datetimepicker를 사용하고 있습니다. 그것은 더 많은 설정을 가지고 있으므로 거기에 overflow-y: auto을 넣고 스크롤 막대가 나타나야합니다. 그것은 작동하지만 datetimepicker 완전히 볼 수없고 날짜를 설정할 수 없습니다. 그러나 overflow-y: auto 설정할 때 발생합니다. 그 팝업에 대한 CSS :

.test { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 250px; 
    padding: 15px; 
    background-color: rgba(125, 0, 0, 0.7); 
    overflow-x: visible; 
    overflow-y: auto; 
} 

여기 jsFiddle link입니다.

Answer 1

overflow-y: visible;

UPDATED FIDDLE

var datePickerOptions = { 
    sideBySide: true, 
    allowInputToggle: true, 
    format: 'DD.MM.YYYY HH:mm', 
    toolbarPlacement: 'top', 
    showTodayButton: true, 
    showClear: true, 
    showClose: true, 
    icons: { 
     time: 'fa fa-time', 
     date: 'fa fa-calendar', 
     up: 'fa fa-chevron-up', 
     down: 'fa fa-chevron-down', 
     previous: 'fa fa-chevron-left', 
     next: 'fa fa-chevron-right', 
     today: 'fa fa-bullseye', 
     clear: 'fa fa-trash', 
     close: 'fa fa-times' 
    } 
}; 

$(function() { 
    $('.input-group.datetime').datetimepicker(datePickerOptions); 
}); 

.test { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 250px; 
    padding: 15px; 
    background-color: rgba(125, 0, 0, 0.7); 
    overflow-x: visible; 
    overflow-y: visible; 
} 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

<div class="test"> 
    <div class="input-group datetime"> 
     <span class="input-group-addon"><i class="fa fa-calendar"></i></span> 
     <input type="text" name="deadline" class="form-control" value=""> 
    </div> 
</div>