Question

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

这是我的代码：

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>

我使用了add the scroll bar in this fiddle的css技巧，但它并不是很整洁。所以我想知道是否有办法在打开日期选择器时展开选项卡高度，或者在选择窗口打开的情况下在模态窗口上显示日期选择器。

Answer 1

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

只需覆盖：

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

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

Demo in jsFiddle

Angular-material的标签和ui-bootstrap的datepicker冲突

1 个答案: