Question

In this plunk我在div中有一个Angular UI Datepicker（div有橙色背景）。问题是Datepicker被截断，即使我设置了z-index: 99999。如果我从div overflow-y:auto中删除了Datepicker，但是当溢出时我需要div来滚动。如何解决这个问题？

HTML：

<div style="height:200px;padding:30px;background-color:orange;overflow-y:auto">
  <p class="input-group" style="z-index:99999">
      <input type="text" class="form-control" ng-model="dt" is-open="config.opened"
          uib-datepicker-popup popup-placement="top-left" datepicker-options="dateOptions" 
           ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1()">
          <i class="glyphicon glyphicon-calendar"></i></button>
      </span>
  </p>
</div>

使用Javascript：

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {

    $scope.opened = false;

    $scope.dateOptions = {
       showWeeks: false
    };

    $scope.open1 = function(){
        $scope.opened = true;
      };


});

app.directive('dir2', function () {
    return {
        restrict: 'EA',          
        scope: {
          someVar: '='
        },
        templateUrl: 'dir2.html',
        link: function (scope, element, attrs) { 

           scope.config = {};
           scope.config.opened = true;

        }
    }
});

Answer 1

这是tooltip，datepicker或popover的常见情况，在这种情况下，最好将内容附加到body，以便当前元素样式不会＆＃ 39;无所谓。基本上在这种情况下，您可以通过将datepikcer-append-to-body设置为true来将日期选择器附加到正文。

datepicker-append-to-body="true"

不要设置z-index，它可以通过调整一些东西来工作，但它可能会无意中破坏其他软件。

Plunker Demo

z-index在Angular UI Datepicker中不起作用

1 个答案: