Bootstrap datetimepicker 在选项卡内容框内被切断答案

【问题标题】：Bootstrap datetimepicker cut off inside of tab-content boxBootstrap datetimepicker 在选项卡内容框内被切断
【发布时间】：2016-05-17 12:45:32
【问题描述】：

我正在使用 eonasdan-bootstrap-datetimepicker。请先看这里的图片：

datetimepicker 位于 Bootstrap 选项卡内容控件中，并被上边距截断。

不带 br 标签的截图
一层 br 标记添加填充，从而允许完整的日期时间选择器显示自己。

包含的 br 标记的屏幕截图

这是表单组下面没有 br 标记的表单标记：

<form class="form-horizontal mt-sm" action='' method="POST">
    <fieldset>    
        <div class="form-group">
            <label for="expiration-date" class="control-label col-md-3">Expiration Date</label>
            <div class="col-md-8">
                <div class="col-md-10"><input type="text" id="expiration-date" class="form-control"></div>
            </div>
        </div>
    </fieldset>
</form>

以下是脚本：

<script src="/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="/lib/select2/select2.min.js"></script>
<script src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" />

【问题讨论】：

请添加小提琴。
是的，小提琴会更好玩，但你也可以在日期选择器上尝试 z-index。
标签容器可能有position:relative 和overflow:hidden。不知何故，日期选择器在该 div 中生成，而不是生成到 body。同样，小提琴会很棒;）
@maverickosama92 给你：jsfiddle.net/Q5HDu/280

标签： jquery html css twitter-bootstrap

【解决方案1】：

问题是标签的z-index 高于日期选择器 UI。因此，要解决此问题，您必须增加日期选择器 UI 的 z-index。

.datepicker {
    z-index: 1151;
}

确保将选择器更改为更具体地处理所需的 .datepicker 元素。还要确保这种风格优先。在我的情况下，我不得不使用 z-index: 1151 !important; 但我不推荐它，除非你能够在没有 !important 的情况下让它工作。

【讨论】：

@omrakhur 不确定确切的数字但这对我有用。我想很久以前，当我遇到类似问题时，我从其他地方拿了这个号码。这对你有用吗？
它不工作。我尝试将样式放在输入中以及 div 中，但仍然没有运气。我也将索引增加到100000，但是不起作用
@omrakhur 你用过z-index: 1151 !important; 吗？
是的。我还调查了 Chrome 的错误。它在那里说“在forms-elements.js jsfiddle.net/qck86vd6中没有定义autosize
我确信这是因为添加日期选择器的元素位于隐藏或滚动溢出的 div 内。如果弹出元素不幸被添加为该容器的子元素，那么您拥有什么 z-index 并不重要。