Question

我在项目中使用了bootstrap datetimepicker插件（https://github.com/Eonasdan/bootstrap-datetimepicker）。

在JsBin中运行
点击输入字段以打开datetimepicker

可以看出，datetimepickers被裁剪了。 liquid-container和liquid-child是来自第三方余烬插件的类，我无法控制它。通过删除它的溢出会改变它的行为。

我希望将datepicker放在顶层，而不是模态，所以没有任何东西可以裁剪它。

JsBin

https://jsbin.com/zibopaguke/1/edit?output

＆＃13;

.liquid-container {
    position: relative;
    overflow: hidden;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.liquid-child {
    overflow: hidden;
}

.modal-md-nd {
    width: 70%;
    z-index: 1000002;
}

.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

.modal-body {
    overflow: auto;
    max-height: 70vh;
    position: relative;
    padding: 15px;
}

.tab-content{
  padding: 15px;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
  <script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/development/build/js/bootstrap-datetimepicker.min.js"></script>
  <link href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
</head>
<body class="dark">
  <div class="liquid-tether modal-dialog modal-md-nd" style="top: 0px; left: 0px; position: absolute; transform: translateX(168px) translateY(-6px) translateZ(0px);">
    <div class="modal-content">
      <div class="modal-header">
        Header
      </div>
      <div class="modal-body">
        <div class="tabs">
          <ul class="nav nav-tabs">
            <li><a>Foo</a></li>
            <li class="active"><a>Bar</a></li>    
          </ul>
          <div class="tab-content">
            <div class="liquid-container">
              <div class="liquid-child">
                <form class="form-horizontal">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="col-sm-4 control-label">Open upwards</label>
                      <div class="col-sm-8">
                        <div class="date input-group">
                          <input id="datetimepicker1" class="form-control">
                          <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                          </span>
                        </div>
                      </div>
                    </div>              
                  </div>
                  <div class="col-sm-6">
                    <div class="form-group">
                      <label class="col-sm-4 control-label">Auto</label>
                      <div class="col-sm-8">
                        <div class="date input-group">
                          <input id="datetimepicker2" class="form-control">
                          <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  </form>
                  <div class="row">
                    <div class="col-sm-12">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu consectetur tellus, eget condimentum nisi. Mauris pulvinar orci ac mattis viverra. Nunc imperdiet mattis erat, in euismod enim aliquet eu. Morbi ut ipsum porta enim dictum consectetur et quis odio. Nunc et blandit augue. In hac habitasse platea dictumst. Mauris vitae bibendum ipsum. Cras pellentesque imperdiet dapibus. Vestibulum condimentum non lacus tempus lobortis. Integer accumsan, risus non luctus efficitur, ex dolor ullamcorper turpis, eget hendrerit sem libero sed eros. Proin iaculis, felis id rutrum dignissim, lacus ante bibendum nunc, vitae finibus turpis erat eu augue.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">Footer</div>
    </div>
  </div>
</div>
  <script type="text/javascript">
    $(function () {
      $('#datetimepicker1').datetimepicker({
        widgetPositioning: {vertical: 'top'}
      });
      $('#datetimepicker2').datetimepicker({});
    });
  </script>  
</body>
</html>

＆＃13;

Answer 1

我有一个类似的问题要解决。
由这些部分构建的模态窗口：模态页眉，模态主体，模态页脚。
DatePicker和组合框隐藏在页脚后面。 Z索引更改不是解决方案。

现在，日期选择器和组合框的“下拉菜单”显示在顶部

我的modal-component.scss

...

.modal {
    overflow: scroll;
}
.modal-body {
    overflow: inherit !important;
}

...

对于您而言，可能是您必须在“标签”类的顶部设置样式。

bootstrap datetimepicker被裁剪

1 个答案: