Nebular: Datepicker z-index

[alsardy2002]

Issue type

I'm submitting a ... (check one with "x")

• [ ] bug report
• [x ] feature request

Issue description

Current behavior:

when open datepicker nb-calender disappear behind the window.!
Expected behavior:

pop up over all.

[andredatsch]

Same problem here, trying a alternative solution while it's not fixed

[Tibing]

Hi @alsardy2002, could you please provide a reproducible example?

[andredatsch]

Hi @alsardy2002, could you please provide a reproducible example?

@Tibing just open the datepicker in a modal, may be the order of the elements, when i was trying and alternate solution, changed the order of the elements and it show on top of the modal

[andredatsch]

@Tibing hope this help

[Tibing]

Ok @andredatsch, I see the issue now. You're using ng-bootstrap for modals. I think, the easiest solution for you now is to use Nebular Dialogs.

[andredatsch]

I changed to Dialogs, works just fine, thanks @Tibing, now i just have 40 forms to refactor lol

[Tibing]

@andredatsch, fine. Let's keep this issue opened, we have to take a look on it deeper.

[Tibing]

Datepicker component works fine with Nebular dialogs, but it has z-index issues with third-party modals.

[Hafman08]

i resolved this by adding to scss file of the component:
/deep/ .nb-theme-corporate .cdk-overlay-container { z-index: 1080; }

[ElviaValladares]

Thank you. That solved it.

[rajpateln1995]

None of the above worked for me!

The following is not a perfect solution but it's working.

Add some method that trigger's on mouseup to the input field.
method(){ if (document.getElementsByClassName("cdk-overlay-container")[0]){ document.getElementsByClassName("cdk-overlay-container")[0].setAttribute("style", "z-index: 1080;"); } }