Ngx-chips: Dropdown menu appears behind bootstrap 4 modal

[vincentpazeller]

I'm submitting a ...

[x ] bug report 

Current behavior

I am using Bootstrap 4. My use case is putting a tag-input (with a tag-input-dropdown) within a bootsrap modal window.

Since the DropdownMenu z-index is set as 100 and the bootstrap's modal z-index is set to more than 1000, the dropdown menu actually appears behing the modal (see screenshot below)

Expected behavior

The dropdownmenu should appear in front of the modal.

I am new to angular, but I guess there are two ways to solve this:
1) Simply set the z-index to a much higher value (2000?)
2) Allow to configure the dropdown menu z-index if needed (I believe not everyone wants to add a tag-input into a modal)

Minimal reproduction of the problem with instructions (if applicable)

Put a tag-input containing a dropdown menu withing a bootstrap 4 modal

What do you use to build your app?. Please specify the version

Webback

Angular version:
Angular 5

ngx-chips version:

Latest (1.5.10)

Browser:

I am using chrome 62, but I guess this affects all browsers...

[thilankascentic]

im having the same issue,

[molot1989]

I fixed it in styles.scss file added

ng2-dropdown-menu { z-index: 9999!important; .ng2-dropdown-menu { z-index: 9999!important; ng2-menu-item { z-index: 9999!important; } } }

[juanc5ibanez]

Im not sure if im the only one facing this but... when applying those styles, something seems to be missing and when clicking outside of the boundaries of the dropdown, the control doesnt seem to close.

[CybrZr00]

Has anyone found a fix for this issue? Z-index settings make no difference at all. I'm using ngx-bootstrap angular-universal ssr. I even tried setting the style on the element manually, no joy...

Edit: I was having webpack issues. I can confirm adding a high z-index to .ng2-dropdown-menu in my root style, done the trick.

[Gbuomprisco]

Check out the option [zIndex] in version 1.7.5

[macpatel]

@Gbuomprisco thanks it fixed

[zIndex]="99999"