extending the width of bootstrap typeahead to match input field

jquery css twitter-bootstrap typeahead
NSaid picture NSaid · Jul 30, 2013 · Viewed 31.9k times · Source

I know this question has been asked atleast three times before but the answer I saw were not what I was looking for. I am looking to increase the width of the autocomplete field that twitter bootstrap generates with its typeahead function. I have been reading that it stretches to cover all the text with in the field. that is to say that the longer the text, the wider the autocomplete field. However I would like it to be a span6 because that is how wide my search field is. Any ideas? I have seen some jquery answers but I couldn't follow them.

Answer

user41871 picture user41871 · Apr 17, 2014

Michael Watson gave what I think is the simplest answer in his comment.

.twitter-typeahead { width: 100%; }

Update #1: Based on the comments below (thanks Steve, Vishi), do the same for .tt-hint, .tt-input, .tt-dropdown-menu.

Update #2: mlissner reports that .tt-dropdown-menu is now .tt-menu, so the end result is

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

Related questions

What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)

Sometimes I use anchors styled as buttons and sometimes I just use buttons. I want to disable specific clicky-things so that: They look disabled They stop being clicked How can I do this?

Read More
Bootstrap throws Uncaught Error: Bootstrap's JavaScript requires jQuery

I am trying to use Bootstrap to make an interface for a program. I added jQuery 1.11.0 to the <head> tag and thought that was that, but when I launch the web page in a browser jQuery reports an …

Read More
How to hide element using Twitter Bootstrap and show it using jQuery?

Let's say I create an HTML element like this, <div id="my-div" class="hidden">Hello, TB3</div> <div id="my-div" class="hide">Hello, TB4</div> <div id="my-div" class="d-none">…

Read More