當設置溢出時，Bootstrap datetimepicker不可見

所以我有一個網站，用戶可以在其中設置日期和時間。我在我的小固定彈出窗口中使用引導日期時間選擇器。它有更多的設置，所以我把它放在那裏overflow-y: auto和滾動條應該出現。它正在工作，但datetimepicker不完全可見，我不能設置日期，但只有當設置overflow-y: auto時纔會發生這種情況。 CSS爲彈出：當設置溢出時，Bootstrap datetimepicker不可見

.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。

來源

2017-03-20 debute

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

來源

2017-03-20 09:28:13 neophyte

對不起，這不是幫助我，因爲我需要在彈出和'溢出-Y滾動條：可見;'會摧毀它。 – debute

當設置溢出時，Bootstrap datetimepicker不可見

回答

相關問題