Angular-UI-Typehead-Direktive wird nicht gelöscht

Question

Ich verwende AngularUI typeahead Direktive. Datenmäßig funktioniert alles gut; Die Dropbox wird jedoch vertikal geschnitten, und eine Bildlaufleiste wird auf der rechten Seite angezeigt. Das Bild unten zeigt was ich meine. Wenn ich nach unten scrolle, sehe ich alle Werte in der typeahead-Dropbox, die ich erwarte.

ich mit den Stilen gebastelt und ich sehe, dass .dropdown-Menüstil aus AngularUI als position: absolute; definiert Wenn ich es position: static; der Drop-Down in voller Höhe zeigt ändern; Wenn ich jedoch eine Schaltfläche unter dem Eingabefeld habe, wird sie rechts neben dem Dropdown angezeigt, anstatt von ihr überlagert zu werden. Auch hier sagt ein Bild mehr als tausend Worte.

Es gibt einige Stile auf der Ebene "Masterseite"; aber ich habe keine Ahnung, was genau solch ein Verhalten verursacht. Klar, ich habe keine CSS/Web-Design-Fähigkeiten mehr.

Answer 1

Das Problem ist, dass Ihr Container hat overflow: hidden und natürlich wird es Dropdown-Typahead schneiden. In solchen Fällen müssen Sie typeahead anweisen, den Dropdown-Container an einen anderen übergeordneten Container anzuhängen, normalerweise body. Dazu verwenden Sie das zusätzliche Konfigurationsattribut typeahead-append-to-body. Etwas wie das:

<input type="text" 
     ng-model="selected" 
     uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" 
     typeahead-append-to-body="true">