Ngx-bootstrap: Dropdowns with container="body" appear behind page elements with a z-index.

[1-0-1]

Bug description

Dropdowns with container="body" appear behind page elements with a z-index.

StackBlitz that reproduces the issue:

https://stackblitz.com/edit/ngx-bootstrap-u2c9tf?file=app%2Fapp.component.html

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 3.3.0
Angular: 7.2.9
Bootstrap: 4.3.0

Build system: Angular CLI

[startiik]

What do you want to do exactly?

What I used container for was not like this. I used in the case with typeahead module in modals, and how you have to do is like this: <input class="form-control" placeholder="Icon" type="text" id="Icon" name="icon" formControlName="Icon" [typeahead]="fontAwesomeIcons" [typeaheadOptionsLimit]="10" [typeaheadMinLength]="0" [typeaheadItemTemplate]="customItemTemplate" [typeaheadScrollable]="true" [container]="'body'">

[1-0-1]

@startiik I'm not sure what your question is. What I want to do is click on a value from the drop down to select it, but the dropdown opens behind the area with a z-index.

Prior to 3.3.0, the dropdown was absolute positioned top/left and wasn't effected by z-index. Starting ~3.3.0, it was switched to use transform: translate3d and now, when attached to the body, it is rendered behind z-indexed areas. The dropdown needs to have a z-index applied to it in order for it to work.

[1-0-1]

I think this is related to #5144. It isn't modal specific but is the result of not having a z-index on the dropdown.

[xaamin]

Fix it using css styles on your main saas file

bs-dropdown-container {
  z-index: 1060;;
}

[IraErshova]

@1-0-1 Hi! Could you please use the latest version of ngx-bootstrap? I think this issue shouldn't appear anymore. You can check this case with the latest version of ngx-bootstrap in my stackblitz example:

https://stackblitz.com/edit/angular-e2hnpj-ttyhot

I'm going to close the issue, but if the problem appears again we will reopen it.

[daniloff200]

Yeah, I think that should be closed via https://github.com/valor-software/ngx-bootstrap/pull/5627 , and fix already available in ver. 5.5.0

[Adam-Michalski]

Setting [container]="'body'" in 5.5.0 does not resolve issue without additional styles

::ng-deep {
  // due to issue Typeahead https://github.com/valor-software/ngx-bootstrap/issues/5153
  typeahead-container {
    // 1050 is lowest value when dropdown is visible
    z-index: 1050 !important;
  }
}

This issue workaround is needed in 5.1.2 and 5.5.0, no changes here.

ncu
ngx-bootstrap ^5.1.2 → ^5.5.0

So I think this issue still needs some work.

[JanLoebel]

As you can see in the tag of 5.5.0 the z-index fix is not included in 5.5.0.

https://github.com/valor-software/ngx-bootstrap/blob/v5.5.0/src/dropdown/bs-dropdown-container.component.ts

So I think we'll have to wait till 5.6.x is available via npm.