Question

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

设置溢出时，Bootstrap datetimepicker不可见

1 个答案: