Опции за ъглов потребителски интерфейс, показващи се зад модала, когато се използват с модал Bootstrap

Изправен съм пред проблем с Angular ui-select (замяна на HTML select). Добавих опцията append-to-body, за да може да се показва върху други елементи.

Но аз се сблъсквам с проблем, че когато се използва в горната част на bootstrap modal, той не показва списък с опции. Всъщност показва, че списъкът с опции се показва зад модала, както можете да видите на изображението.

Има ли някакво решение на този проблем?

въведете описание на изображението тук


css angularjs bootstrap-modal twitter-bootstrap-3 angular-ui-select
person ua_boaz    schedule 22.05.2016    source източник

Отговори (2)


arrow_upward
3
arrow_downward

Просто добавете z-index CSS свойство, по-голямо от 1050 за родителския елемент на елемента ui-select.

Защо над 1050?

Тъй като z-index на класа .modal е зададено на 1050, така че трябва да предоставим по-високо z-index на родителския елемент на падащото меню, така че да може да се показва над модала в z-ос.

person Shashank Agrawal    schedule 22.05.2016
comment
здравейте, използвам обвивка около ui-select, така че свойството z-index се добавя към всички компоненти на ui-select в моето приложение, току-що осъзнах, че това причинява страничен ефект. Сега, когато отворя който и да е модален изскачащ прозорец, той показва комбинираните полета в горната част на модала, които са на страницата. някакво решение за това? - person ua_boaz; 22.05.2016
comment
Можете ли да предоставите plunkr/fiddle или SO фрагмент за същото? - person Shashank Agrawal; 23.05.2016

arrow_upward
0
arrow_downward

Бях изправен пред същия проблем и в моя случай използвах append-to-body="true" в моята ui-select директива. Задаването на това на false го поправи за мен.

person söze    schedule 08.08.2018