オーバーフローが設定されていると、ブートストラップの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>