Angular-UI typeahead指令不会下拉

Question

I am using AngularUI typeahead directive. Data-wise everything works fine; however, the dropbox is cut vertically, and a scrollbar shows up on the right. The image below shows what I mean. If I scroll down, I see all the values in the typeahead dropbox that I expect.

I tinkered with the styles and I see that .dropdown-menu style from AngularUI is defined as position: absolute; If I change it to position: static; the dropdown shows at full height; however, if I have a button below the input field - it shows to the right of the dropdown, instead of being overlayed by it. Again, a picture is worth a thousand words.

There are some styles at the "master page" level; but I have no idea what exactly causes such behavior. Clearly, I am running out of my CSS/Web design skills.

Answer 1

The problem is that your container has overflow: hidden and of course it will cut typeahead's dropdown. In such cases you need to tell typeahead to append dropdown container to another parent container, typically body . For this you use additional config attribute typeahead-append-to-body . Something like this:

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