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
overflow-y:auto
<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>
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;
}
}
});
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.