4

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

Community
  • 1
  • 1
wildbyte
  • 139
  • 1
  • 10

1 Answers1

1

I also added 

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

for the input type.

fab10m
  • 11
  • 3
  • Thanks, but it's not a question of dropdown transparence. Dropdown links are unclickable because they get rendered under normal navbar links, in a deeper layer. – wildbyte Sep 02 '13 at 18:46