ps0604 ps0604 - 8 months ago 79
AngularJS Question

z-index not working in Angular UI Datepicker

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;

}
}
});

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download