Bootstrap-datepicker: Datepicker z-index problem inside modal

[betonetotbo]

When you put the boostrap datepicker inside a boostrap modal, the popup shows behind the modal.

This occurs because the code assumes the first element as the bigger zIndex inside the place function:

  var zIndex = parseInt(this.element.parents().filter(function(){
        return $(this).css('z-index') !== 'auto';
  }).first().css('z-index'))+10;

The FIX:

Iterate over all parents to discover the biggest zIndex:

Here is my code:

        var biggestZIndex = 0;
        this.element.parents().each(function(index, parent) {
            var zIndex = $(parent).css('z-index');
            if (zIndex !== 'auto') {
                var zIndex = parseInt(zIndex);
                if (zIndex > biggestZIndex) {
                    biggestZIndex = zIndex;
                }
            }
        });
        var zIndex = biggestZIndex + 10;

[carlituxman]

+1

[carlituxman]

I fix it temporally with:

.datepicker{z-index:9999 !important}

[mrosalesdiaz]

+1

[mikegoodspeed]

+1

[PrplHaz4]

@acrobat any chance of getting this fixed as part of 1.3.1 or 1.3.2?

Related
Issues: #94 #325 #464 #569 #1027
PRs: #533 #609 #634 #656 #665 #678 #710 #829 #850 #876 #996 #1183

[acrobat]

@PrplHaz4 I will take a look at those issues/pr's and try to squeeze it into 1.3.1! Otherwise this will move to 1.4.0 as that will be the next version

[PrplHaz4]

@acrobat sounds good! Thanks so much for adopting this project - we are extremely grateful!

If it helps, I have been using this patch for a bit and it seems to work fine, but my use case is relatively simple, and I don't think I'm qualified to rate the numerous other options for compatibility outside my requirements.
https://github.com/Zweer/bootstrap-datepicker/commit/a54c91f83e4a4ed027545bde3493a05e5dc30876

[acrobat]

@PrplHaz4 I've merged 2 pull requests (#710, #665) that should fix this issue and they are integrated in 1.3.1

[bainguyendeveloper]

I use this in css
.modal-open .ui-datepicker{z-index: 2000!important}

[eviltek2099]

I fixed with ul.uib-datepicker-popup.dropdown-menu.ng-scope { z-index: 1090 !important; }