Когда элемент выбран, раскрывающийся список ui-select открывается за другими полями.

Question

Я использую ui-select в приложении angularjs, которое повторяется для каждой строки в таблице (ng-repeat). Это код для моего интерфейса выбора.

<ui-select name="{{'selProperty' + $index}}" ng-model="thing.property" 
 theme="bootstrap" ng-required="true">
    <ui-select-match placeholder="PLACEHOLDER TEXT">
        {{$select.selected.displayName}}
    </ui-select-match>
    <ui-select-choices repeat="property in data.properties | filter: $select.search">
        {{property.displayName}}
    </ui-select-choices>
</ui-select>

У меня есть список вещей в моем объекте $ scope.data, и содержащая таблица использует ng-repeat="thing in data.things", В каждой строке таблицы есть поля, которые пользователь заполняет, чтобы задать свойства вещи. Раскрывающийся список позволяет пользователю назначить свойство объекта вещи.

Все отлично работает при первом использовании. Я получаю список свойств и могу ввести частичный поиск, чтобы отфильтровать список. Я выбираю один, проверяю вещь и вижу, что ее свойство правильно установлено. Проблема заключается в том, что когда я снова открываю раскрывающийся список после выбора значения, весь список отображается за другими полями ui-select в других строках таблицы. Я попробовал это на неповторяющейся странице, и это обнаружилось позади <input type="text"></input> коробка также.

Я безуспешно пытался настроить z-index на смешные цифры. Я скопировал исходный HTML до и после выбора значения и сравнил, но различий не было. Я действительно не понимаю, почему мой список отображается позади других элементов ввода на странице.

Answer 1

Пожалуйста, проверьте ссылку GitHub Issue ниже:

https://github.com/angular-ui/ui-select/issues/308

Решение состоит в том, чтобы добавить ниже CSS, посмотрите, работает ли он для вас.

   .ui-select-choices {
    position: fixed;
    top: auto;
    left: auto;
    width: inherit;
  }