Question

我希望日历显示在.row div之外，但div必须同时具有两个滚动条。

如果div已经溢出popierty切断日历。我尝试将widgetParent设置为body，但是日历的位置是错误的。不接近输入。

<div class="container">
  <div class="row" style="border: 1px solid #000; width: 150px; height: 200px; overflow: scroll;">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' style="width: 40px;" class="form-control" />
          <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

example

Answer 1

$(function() {
  $('#datetimepicker1').datetimepicker();
  //  $('#datetimepicker1').datetimepicker({widgetParent: 'body'});
});

.row {
  position: relative;
  border: 1px solid #000;
  width: 150px;
  height: 200px;
  overflow: show;
}

.row #datetimepicker1 {
  position: absolute;
  z-index: 10001;
  top: 20px;
  right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

尽量不要编写内联css，而是可以给类，然后在该类中编写css。

这与您正在寻找的相同吗？

希望这有帮助。

Answer 2

将.row的溢出更改为“show”。所以：

<div class="row" style="border: 1px solid #000; width: 150px; height: 200px; overflow: show;">

bootstrap3 datetimepicker div切断日历

2 个答案: