Une fois qu'un élément est sélectionné, la liste déroulante ui-select s'ouvre derrière les autres champs

Question

J'utilise ui-select dans une application angularjs qui se répète pour chaque ligne d'une table (ng-repeat). C'est le code pour mon 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> 

J'ai une liste des choses sur mon objet scope.data de $, et la table contenant utilise un ng-repeat="thing in data.things". Dans chaque rangée de la table sont des champs que l'utilisateur remplit pour définir les propriétés sur la chose. La liste déroulante permet à l'utilisateur d'attribuer une propriété d'objet à la chose.

Tout fonctionne correctement lors de la première utilisation. Je reçois la liste des propriétés et je peux taper la recherche partielle pour filtrer la liste. J'en choisis un, vérifie la chose et vois que sa propriété est correctement réglée. Le problème est que lorsque je rouvre la liste déroulante après avoir sélectionné une valeur, la liste entière apparaît derrière les autres cases de sélection d'interface utilisateur sur les autres lignes de la table. Je l'ai essayé sur une page non-répétitive, et il s'est présenté derrière une boîte <input type="text"></input> ainsi.

J'ai essayé d'ajuster l'index z à des nombres ridicules sans aucune chance. J'ai copié le code source avant et après avoir sélectionné une valeur et comparé, mais il n'y avait pas de différences. Je ne comprends vraiment pas pourquoi ma liste apparaît derrière les autres éléments d'entrée sur la page.

Answer 1

S'il vous plaît vérifier le lien d'émission github ci-dessous:

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

La solution est d'ajouter ci-dessous CSS, voir si cela fonctionne pour vous. Pouvez-vous fournir un petit extrait illustrant ce problème?

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