设置溢出时，引导 datetimepicker 不可见答案

【问题标题】：Bootstrap datetimepicker is not visible when overflow is set设置溢出时，引导 datetimepicker 不可见
【发布时间】：2017-03-20 09:21:21
【问题描述】：

所以我有一个网站，用户可以在其中设置日期和时间。我在我的小型固定弹出窗口中使用引导程序 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。

【问题讨论】：

标签： jquery html css twitter-bootstrap bootstrap-datetimepicker

【解决方案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>

【讨论】：

抱歉，这对我没有帮助，因为我需要在弹出窗口中添加一个滚动条，overflow-y: visible; 会破坏它。