ua_boaz ua_boaz - 5 months ago 152
AngularJS Question

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

I am facing issue with Angular

(replacement for HTML select). I have added the option
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?

enter image description here


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.