4

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?

enter image description here

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
josh_boaz
  • 1,963
  • 7
  • 32
  • 69

2 Answers2

3

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.

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
  • hello I am using a wrapper around ui-select, so the z-index property is added to all the ui-select components, in my application, i just realized that this is causing a side affect. Now when i open up any modal popup, it is showing the comboboxes on top of the modal, which are on the page. any solution for this? – josh_boaz May 22 '16 at 14:52
  • Can you provide a plunkr/fiddle or SO snippet for the same? – Shashank Agrawal May 23 '16 at 04:03
1

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.

söze
  • 500
  • 1
  • 3
  • 13