0
In this plunk J'ai un pointeur d'interface utilisateur angulaire à l'intérieur d'un div (le div a un arrière-plan orange). Le problème est que le Datepicker est tronqué, même si j'ai défini z-index: 99999. Si je supprime de la div overflow-y:auto le Datepicker est montré, mais j'ai besoin de la div pour faire défiler quand il y a un débordement. Comment régler ce problème?L'index z ne fonctionne pas dans l'interface utilisateur angulaire. 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;
}
}
});