容器 div 隐藏的引导日期选择器

Question

我有一个生日输入文本，我使用 Bootstrap datepicker v4。

表格位于

<div class="media">

容器内。如图所示，日期选择器日历被“媒体”div 的边框隐藏，我无法用 z-index 解决这个问题，它不起作用。 当我对媒体和选项卡内容这两个类使用

overflow: visible

时，字段失去了宽度并且显示布局发生了变化（参见第二张图）。

<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<div class="tab-wrap">
  <div class="media">
    <div class="parrent pull-left">
      <ul class="nav nav-tabs nav-stacked">
        <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01"><?= lang('BASIC_INFO'); ?></a></li>
        <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02"><?= lang('PUBLIC_PROFILE'); ?></a></li>
        <li class=""><a href="#tab3" data-toggle="tab" class="tehnical"><?= lang('INTERESTS'); ?></a></li>
        <li class=""><a href="#tab4" data-toggle="tab" class="tehnical"><?= lang('FOTOS'); ?></a></li>
      </ul>
    </div>

    <div class="parrent media-body">
      <div class="tab-content">
        <div class="tab-pane fade active in" id="tab1">
          <div class="media">    
            <div class="media-body">     
              <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                  <input type='text' id='bdate' name='bdate' class="form-control" value="<?= $userProfile ? $userProfile['bdate'] : '' ?>"/>
                  <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

起诉后的结果

overflow: visible;

Answer 1

在父容器（例如

overflow: hidden;

）上查找

.media

，并查看是否可以覆盖它或将其删除（如果已设置）（

overflow: visible;

将是覆盖）。

我只是猜测，因为我不知道你的完整 CSS 是什么样子，但另一种可能性可能是你尝试应用的

z-index

被覆盖，因为你使用的规则不如 Bootstrap CSS 中的规则具体。检查浏览器开发人员工具中应用的样式，以验证您提供的

z-index

是否优先。

Answer 2

你可以试试这个

$('selector').datetimepicker().on('dp.show',function(){
    $('.media').css({'overflow':'visible'});
}).on('dp.hide',function(){
    $('.media').css({'overflow':'hidden'});
})

Answer 3

按照@trungbadao的回答，即使日期时间选择器有更新，我们也需要将溢出设置为隐藏，因此他的答案可以这样更新：

$('selector').datetimepicker().on('dp.show',function(){
    $('.media').css({'overflow':'visible'});
}).on('dp.hide',function(){
    $('.media').css({'overflow':'hidden'});
}).on('dp.change',function(){
    $('.media').css({'overflow':'hidden'});
})

Answer 4

经过 4 小时的搜索和尝试，这对我有用，我有一个祖先，它的位置相对溢出 x 隐藏，所以我将其直接父 .date 位置设为静态，并固定了实际的日期时间选择器位置。

.date{
    position: static;
}

.bootstrap-datetimepicker-widget{
    position:fixed
}

 $(".date").datetimepicker({
    locale: "{{ LANGUAGE_CODE }}-ca",
    keepOpen: false,
    format: "YYYY-MM-DD HH:mm",
  });