Typeahead inside modal with container="body" is clipped

[bcmedeiros]

Bug description:

I'm using a typeahead inside a modal, with container="body", and the drop-down shows up "behind" the modal. I had a quick look at the browser debugger and it seems the default z-index of the modal is 1050 whereas the z-index of the drop-down is 1000.

I'm not sure if it is a ng-bootstrap or a bootstrap issue, but as it seems related to the typeahead component, I'm reporting it here. Please let me know if I need to report it somewhere else.

My current workaround is:

body {
    >.dropdown-menu {
        z-index: 1100;
    }
}

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 6.0.7
ng-bootstrap: 2.0.0
Bootstrap: 4.1.1

[maxokorokov]

Note: steps to reproduce locally: add container="body" for the datepicker popup in the modal-basic.html demo:

https://stackblitz.com/edit/angular-w19hc4

I'm not sure we'll be able to fix this in any way until/unless we support stacked modals.
For now I'd say it's working as designed → it would be the same issue in pure bootstrap

[bcmedeiros]

it would be the same issue in pure bootstrap

Yes, that's true, except for the fact that it is less likely that one would use a drop-down inside a modal than it is to use a typeahead, which is a ng-bootstrap specific component.

I'm not sure if we have an equivalent for container="body" in "plain" Bootstrap (jquery) as I never used it outside Angular.

If I can help in some way, please, let me know.

[pkozlowski-opensource]

I'm not sure we'll be able to fix this in any way until/unless we support stacked modals.

IMO stacked modals will make this issue even worse as we need to bump up z-index in each freshly opened modal.

TBH I don't see another fix than having a "global" knowledge of opened popups (of any kind) and force z-index on each freshly opened popup.... But this will break people that customise z-index in their themes.... Oh, joy of widget development :-)

[snehal-jadhav]

Just add below css in style.css in below code:

ngb-datepicker{
z-index: 100000000 !important;
}

https://stackblitz.com/edit/angular-w19hc4