Dropdown menu appears behind bootstrap 4 modal

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…

[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; } } }

[Gbuomprisco]

Check out the option [zIndex] in version 1.7.5