Angular-material 选项卡和 ui-bootstrap datepicker 冲突

Question

我有一个带有角度材料选项卡和 ui-bootstrap 日期选择器的模态窗口。当我打开日期选择器时，文本字段向上移动，我无法访问日期选择器或字段。

Here's a demo in jsFiddle

这是我的代码：

var app = angular.module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngAria', 'ngMaterial'])
.controller('myController', function ($scope, $modal) {
  $scope.showModal = function () {
    var modalInstance;
    modalInstance = $modal.open({
      templateUrl: "addNew.html",
      controller: 'myController2',
      size: 'lg'
    });
  };
  $scope.showModal();
})
.controller('myController2', function ($scope, $modal) {
  $scope.datepickers = {
    start: false
  }

  $scope.openDatepicker = function ($event, which) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.datepickers[which] = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.dateFormat = 'mediumDate';
});

<div ng-app="myApp">
  <div ng-controller="myController">
    <script type="text/ng-template" id="addNew.html">
      <div class="modal-body">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Add</h3>
          </div>
          <div class="panel-body">
            <md-tabs md-dynamic-height md-border-bottom>
              <md-tab label="date">
                <div class="form-horizontal">
                  <div class="row">
                    <div class="col-md-6">
                      <div class="row form-group">
                        <label for="dateStart" class="col-sm-2 col-md-4 control-label">
                          Date&nbsp;Start
                        </label>
                        <div class="col-sm-10 col-md-8">
                          <div class="input-group ui-datepicker">
                            <input type="text"
                                   class="form-control"
                                   name="dateStart"
                                   id="dateStart"
                                   datepicker-popup="{{dateFormat}}"
                                   ng-model="campaign.dateStart"
                                   is-open="datepickers.start"
                                   datepicker-options="dateOptions"
                                   ng-required="true"
                                   ng-click="openDatepicker($event, 'start')"
                                   close-text="Close"/>
                            <span class="input-group-addon" ng-click="openDatepicker($event, 'start')">
                              <i class="glyphicon glyphicon-calendar"></i>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </md-tab>
              <md-tab label="other tabs"></md-tab>
              <md-tab label="other tabs"></md-tab>
              <md-tab label="other tabs"></md-tab>
              <md-tab label="other tabs"></md-tab>
            </md-tabs>
          </div>
        </div>
      </div>
    </script>
  </div>
</div>

我对@9​​87654322@ 使用了一个 css 技巧，但它不是很整洁。所以我想知道是否有办法在打开日期选择器或日期选择器显示在模式窗口上（如选择窗口打开）时扩展选项卡高度。

Answer 1

您需要让下拉日期选择器作为常规文档流的一部分出现，这样它会占用空间并且选项卡选择器会自动为其腾出空间。它目前没有这样做，因为它使用 .dropdown-menu，Bootstrap 将 position: absolute; 添加到该 position: absolute;

像这样覆盖：

.dropdown-menu[datepicker-popup-wrap] {
    position: static;
}

你可以做一些其他风格的事情，但这是基本原则。

Demo in jsFiddle