Bootstrap datetimepicker n'est pas visible lorsque le débordement est défini

Question

J'ai donc un site Web où l'utilisateur peut définir une date et une heure. J'utilise bootstrap datetimepicker dans mon petit popup fixe. Il a beaucoup plus de paramètres donc je mets là overflow-y: auto et la barre de défilement devrait apparaître. Cela fonctionne, mais datetimepicker n'est pas entièrement visible et je ne peux pas définir de date, mais cela se produit uniquement lorsque overflow-y: auto est défini. CSS pour cette pop-up:

.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; 
} 

est ici jsFiddle link.

Answer 1

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