选择一个项目后，ui-select下拉列表将在其他字段之后打开

Question

I'm using ui-select in an angularjs app that repeats for every row in a table (ng-repeat). This is the code for my ui-select.

<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>

I have a list of things on my $scope.data object, and the containing table uses an ng-repeat="thing in data.things" . In each row of the table are fields that the user fills out to set properties on the thing. The dropdown lets the user assign an object property of the thing.

Everything works fine on first use. I get the list of properties and I can type in the partial search to filter the list. I select one, check the thing and see that it's property is correctly set. The problem is that when I re-open the dropdown list after having selected a value, the entire list shows up behind the other ui-select boxes on the other rows of the table. I tried it on a non-repeating page, and it showed up behind an <input type="text"></input> box as well.

I've tried adjusting the z-index to ridiculous numbers with no luck. I copied out the source HTML before and after selecting a value and compared, but there were no differences. I really don't understand why my list is showing up behind the other input elements on the page.

Answer 1

Please check the github Issue link below:

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

The solution is to add below CSS, See if it works for you.

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