Question

我在滚动容器中有一个日期选择器。问题是当它看起来被限制在滚动条内并且弄乱了滚动条的高度时，我希望弹出窗口显示在滚动的外部/前面并且平滑，因此不会导致高度问题。

请参阅此{{3}}

<div ng-controller="DatepickerDemoCtrl">
<div class="row">
    <div class="col-md-6">
        <div class="input-group">
          <input
            type="text"
            id="popup"
            class="form-control"
            datepicker-popup=""
            ng-model="today"
            is-open="opened"
            min-date="minDate"
            max-date="'2015-06-22'"
            ng-click="open()"/>
          <span class="input-group-btn">
            <label for="popup" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></label>
          </span>
        </div>
    </div>
</div>
<pre>Selected date is: <em>{{today}}</em></pre>

body {padding:20px}
.col-md-6{
    overflow:scroll;
    height:200px;
    background:red;
    }
.input-group{
    background:green;
    height:300px;
}

Answer 1

将appendToBody更改为true。

.constant('datepickerPopupConfig', {
  datepickerPopup: "MMM d, yyyy",
  closeOnDateSelection: true,
  appendToBody: fasle,
  showButtonBar: false
})

Answer 2

在ui-bootstrap.js中更改appendToBody: true的同时，我不得不将z-index的值更改为1051

// ui-bootstrap.js
.constant('uibDatepickerPopupConfig', {
    appendToBody: true
)}

.uib-datepicker-popup.dropdown-menu {
    z-index: 1051 !important;
}

在滚动条外部定位Angular UI Datepicker

2 个答案: