0
In this plunk Ich habe eine Angular UI Datepicker in einem Div (das Div hat orange Hintergrund). Das Problem ist, dass der Datepicker abgeschnitten ist, obwohl ich z-index: 99999 gesetzt habe. Wenn ich aus dem div overflow-y:auto entferne wird der Datepicker angezeigt, allerdings muss ich das div scrollen wenn es einen Überlauf gibt. Wie behebe ich dieses Problem?z-index funktioniert nicht in Angular UI Datepicker
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;
}
}
});