z-index not working in Angular UI Datepicker

Question

In this plunk I have an Angular UI Datepicker inside a div (the div has orange background). The problem is that the Datepicker is truncated, even though I set

z-index: 99999

. If I remove from the div

overflow-y:auto

the Datepicker is shown, however I need the div to scroll when there's an overflow. How to fix this problem?

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;



        }

    }

});

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

This is very common case with tooltip, datepicker or popover in such cases it is better choice to append the content to body so the current element styling doesn't matter. Basically in this case you could append datepicker to body by setting below datepikcer-append-to-body to true.

datepicker-append-to-body="true"

Don't go for setting z-index, it may work by tweaking few things, but not preferred solution.

Plunker Demo

z-index not working in Angular UI Datepicker

Sign up