Increase picker z-index value (>v0.10.x)

[plicas]

Hi!
I'm using this picker inside one modal, and since the last update the picker is shown behind the modal.. looks like a Z-Index problem.

I'm using the cdn link, so i think that the problem is the last updates because on my side nothing changed.

UPDATE:
I change the cdn link to the version 0.9.11 and the picker is now working fine.

[kalle17]

It seems that z-index:1000 for class .moment-picker is not enough when picker appends to body and picker is opened in bootstrap 3.x modal. For me it shows above modal div when .moment-picker CSS class has z-index:1050. I would suggest z-index:1500 to be on the safe side.

[indrimuska]

Thanks guys, this is well known for this release.
As @kalle17 already said, you should override the default z-index for your need. Anyway the final solution is to calculate the maximum z-index till the element that references the picker and then set that z-index value + offset.

---

Edit: it should be possibile to compute the z-index of a given element with this:

const style  = document.defaultView.getComputedStyle(element, null);
const zIndex = style.getPropertyValue("z-index"); // can return "auto"
//          or style['z-index'];
//          or style.zIndex;

Anyway, it does not take care of parents z-index value, so we should iterate till the root.

[indrimuska]

I've just analyzed the code of Bootstrap's tooltip and there's no calculation of z-index for parent elements, just a style rule for the tooltip hardcoded to 1070.

I thinks this choose lets the flexibility to easily override that value and also speed up performances because no computation are needed. So, I'm going to follow this way too, and I'll set the z-index value to 1060 (less than tooltip, more than modal). This is the same level value for the popover.

Those z-index values of Bootstrap seem re-used for v4 (alpha).

[EssenKh]

@indrimuska
Can't fix this issue using z-index,
here is my source code:

                        <div class="form-group">
                                <p class="icon-group input-group ">
                                    <input readonly ng-model="startTime" class="form-control">
                                    <span class="input-group-btn ">
                                        <button moment-picker="startTime"
                                                          format="HH:mm"
                                                          type="button" class="btn btn-default">
                                            <i aria-hidden="true" class="glyphicon glyphicon-calendar"></i>
                                        </button>
                                    </span>
                                    <span class="show-date-picker"></span>
                                </p>
                            </div>

[galmok]

I set this in my application css file:

.moment-picker {
z-index: 1060 !important;
}

Now moment-picker is visible, even in modals (but also on top of modals even if not wanted to).

[indrimuska]

A new version has just been released and includes a fix for this issue.

[chloegugli]

This issue doesn't seem fixed in the latest release (0.10.2)

[Alorenzog]

I'm using the angular Moment Picker - v0.10.2 version, I have the same issue
in ng-dialog windows.