Angular - UI Bootstrap Datepicker not displaying over Bootstrap Modal

By : jhamm

I have an Angular app that I am using UI Bootstrap. I have a modal with a Datepicker at the bottom of the modal. When expand the Datepicker, it stays inside the modal. I have tried changed the z-index, but that does not change anything. Here is my html for the Datepicker:

<div class="control-group">
  <label class="control-label">Birth Date:</label>
  <div class="controls">
    <div class="form-horizontal" ng-controller="DatepickerCtrl">
      <input name="birthdate" class="input-thick" type="text" datepicker-popup="MM/dd/yyyy" ng-model="model.dateOfBirth" is-open="opened" min="minDate" max="'2013-11-11'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" required />
      <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
      <p ng-show="!addPatientForm.birthdate.$valid && formSubmitted" class="form-error"><i class="fa fa-exclamation-circle "></i> <b>Date of Birth: </b>Enter a date in the format MM/DD/YYYY. It cannot be a future date.</p>

And the js:

App.controller('DatepickerCtrl', function ($scope, $routeParams, $modal, $timeout) {
  $ = function() {
    $scope.dt = new Date();


  $scope.showWeeks = true;

  $scope.toggleWeeks = function () {
    $scope.showWeeks = ! $scope.showWeeks;

  $scope.clear = function () {
    $scope.dt = null;

  $scope.toggleMin = function() {
    $scope.minDate = ( $scope.minDate ) ? null : new Date();

  $ = function() {
    $timeout(function() {
      $scope.opened = true;

  $scope.dateOptions = {
    'year-format': 'yy',
    'starting-day': 1

Here is a plunker to show my issue. What do I need to do to make my Datepicker show up correctly?

By : jhamm

Removing the style overflow-y: auto from .modal-body fixes the issue. Right now, the overflow-y attribute automatically adds the scrollbar when the content overflows (in this case, the datepicker) rather than allowing it to overflow outside of the modal-body.

@Jakemmarsh's answer is basically right ! !
But in my practice, I use angular-strap and put datepicker in modal, and the problem similar with repaint happened.
I finally solved it by:

.modal-open .modal.repaint{overflow-y: hidden !important;}


    $(".modal-open .modal").addClass("repaint");

May this will helpful for someone. :/

By : soytian

This video can help you solving your question :)
By: admin