从 md-dialog 中显示下拉菜单（bootstrap-ui-datetime-picker）

Question

我正在使用md-dialog 来显示一个表单。

表单包含md-input-container，其中显示input 标签和select 标签。 最后一个容器出现https://github.com/Gillardo/bootstrap-ui-datetime-picker

<md-input-container class="md-block" flex-gt-sm>
    <label>Time</label>
    <p class="input-group">
        <input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm" ng-model="scheduledJob.date" is-open="scheduledJob.open"/>
        <span class="input-group-btn">
              <button type="button" class="btn btn-default" ng-click="openCalendar($event, scheduledJob)">
                  <i class="fa fa-calendar"></i></button>
          </span>
    </p>
</md-input-container>

但是每当点击它时，md-dialog 就会开始显示如下滚动条：

如何使这个特定的下拉列表超出md-dialog，这是我面临的问题的快速CodePen。

Answer 1

在input 元素中定义日期选择器选项datepicker-append-to-body="true"。

<input type="text" class="form-control" datetime-picker="MM/dd/yyyy HH:mm" 
   datepicker-append-to-body="true" ng-model="scheduledJob.date" 
   is-open="scheduledJob.open"/>

来自angular-ui/bootstrap自述文件：

datepicker-append-to-body（默认：false，配置：appendToBody）- 将 datepicker 弹出元素附加到 body，而不是在 datepicker-popup 之后插入。