bootstrap3 and twitter typeahead integration

Question

I am trying to integrate twitter-typeahead with bootstrap3. I want to use a typeahead inside a navbar.

The problem appears only when navbar is collapsed and only in mobile devices (issue at least in iPhone safari and BB10 browser), and it is the following:

The typeahead dropdown appears under the rest of the navbar content:

BlackBerry10 browser

Safari on iPhone

I tried tweaking z-index and position:

.twitter-typeahead .tt-dropdown-menu {
     position: absolute !important; 
     z-index:9999 !important;
}

I have replicated the issue here:

http://jsfiddle.net/zZpQg/3/

Why is this happening only in mobile small devices? How can I get the typeahead dropdown to appear on top of the rest of the links?

KindRegards

Answer 1

I also added

.tt-query {
     backgroud-color: #fff !important; 
}

for the input type.