Раскрывающийся список (bootstrap -ui-datetime-picker) из md-диалога

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

Определите опцию DatePicker datepicker-append-to-body="true" в вашем input элементе.

<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"/>

From angular -ui / bootstrap readme:

datepicker-append-to-body (по умолчанию: false, Config: appendToBody) - добавить всплывающий элемент datepicker в тело вместо вставки после всплывающего окна datepicker.