search

akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/nebular
MIT License
8.06k stars 1.51k forks source link

Datepicker z-index #987

Open alsardy2002 opened 5 years ago

alsardy2002 commented 5 years ago

Issue type

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

Issue description

Current behavior:

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

pop up over all.

image

andredatsch commented 5 years ago

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

Tibing commented 5 years ago

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

andredatsch commented 5 years ago

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 commented 5 years ago

@Tibing hope this help

exemple-1 code

Tibing commented 5 years ago

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 commented 5 years ago

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

Tibing commented 5 years ago

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

Tibing commented 5 years ago

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

Hafman08 commented 5 years ago

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

ElviaValladares commented 5 years ago

Thank you. That solved it.

rajpateln1995 commented 4 years ago

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;"); } }