Angular ui-select options showing behind the modal when used with Bootstrap modal

Question

I am facing issue with Angular ui-select (replacement for HTML select). I have added the option append-to-body so that it can be shown on top of other elements.

But I am facing an issue that when it is used on top of bootstrap modal, it does not show list of options. In fact it shows the list of options are displayed behind the modal, as you can see in the image.

Is there any workaround that issue?

Answer 1

Simply add a z-index CSS property greater than 1050 for the parent element of the ui-select element.

Why greater than 1050?

Because the z-index on the .modal class is set to 1050 so we need to provide higher z-index of the parent element of the dropdown so that it can appear above the modal in z-axis.

Answer 2

I was facing the same problem and in my case I was using append-to-body="true" in my ui-select directive. Setting this to false fixed it for me.