twitter bootstrap typeahead dropdown

Question

Hi i am using twitter bootstrap. I have used typeahead in my model window. My Problem is when I type in textbox the dropdown is coming perfect but its coming at very bottom of textbox. I have observed that there is attribute top set when drop down is coming. But I don't know how to change that at run time.

Here is the Image:

I am not good in CSS. Can anybody tell me that what should do to resolve this problem ?

Answer 1

You need to override some of the default styling of the typeahead class in bootstrap. Specifically, I am able to get it to appear properly by setting the position to relative and the z-index to 10000. The position property requires that you use the !important declaration.

.typeahead {
    position:relative !important;
    z-index:10000;
}​

See my working fiddle at http://jsfiddle.net/technotarek/Msttw/ .

Note that my typeahead values are the color of the rainbow in case you're having trouble triggering it.

Also, depending on your exact form layout, you may have to adjust the positioning of the typeahead element for your own situation by using the top/bottom or left/right CSS properties.