Angular-UI typeaheadディレクティブがドロップされない

Question

AngularUI typeaheadディレクティブを使用しています。データ的にはすべて正常に動作します。ただし、ドロップボックスは垂直にカットされ、スクロールバーが右側に表示されます。下の画像は、私が意味するものを示しています。下にスクロールすると、私が期待している先行ドロップボックスのすべての値が表示されます。

私はスタイルで手を加えて、私はAngularUIから.dropdownメニューのスタイルは、私はposition: static;に変更した場合はドロップダウンが完全な高さで示しposition: absolute;として定義されていることがわかり、ただし、入力フィールドの下にボタンがある場合は、ドロップダウンリストの右側にオーバーレイされずに表示されます。繰り返しますが、絵は千語に相当します。

"マスターページ"レベルにはいくつかのスタイルがあります。しかし、私はそのような振る舞いの原因を正確には知らない。明らかに、私はCSS/Webデザインスキルが不足しています。

Answer 1

問題は、コンテナにoverflow: hiddenがあり、もちろん先読みのドロップダウンを減らすことです。このような場合、typeaheadに別の親コンテナにドロップダウンコンテナを追加するように伝える必要があります。通常はbodyです。このために、追加の設定属性typeahead-append-to-bodyを使用します。このようなもの：

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