wildbyte
wildbyte

Reputation: 139

bootstrap3 and twitter typeahead integration

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

screenshoot of the problem

Safari on iPhone

screenshoot of the problem

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

Upvotes: 4

Views: 1095

Answers (1)

fab10m
fab10m

Reputation: 11

I also added

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

for the input type.

Upvotes: 1

Related Questions