将Angular UI Datepicker定位在滚动条之外答案

【问题标题】：Position Angular UI Datepicker Outside Scrollbar将Angular UI Datepicker定位在滚动条之外
【发布时间】：2015-08-11 12:20:58
【问题描述】：

我在滚动容器中有一个日期选择器。问题是当它出现在滚动条内并弄乱了滚动条的高度时，我希望弹出窗口出现在滚动条的外部/前面，既美观又平滑，因此不会引起高度问题。

看到这个fiddle

<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;
}

【问题讨论】：

jsfiddle.net/4ht8y4nw/111
输入一些代码，以便您可以在问题中正确添加小提琴链接。
这很有趣，添加代码。

标签： angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

将 appendToBody 更改为 true。

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

【讨论】：

谢谢，有什么办法关闭滚动弹出窗口。它只是停留在那里。

【解决方案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;
}

【讨论】：