extending the width of bootstrap typeahead to match input field

ngx-bootstrap typeahead width
typeahead field
bootstrap typeahead ajax json example
bootstrap typeahead multiple select example
bootstrap 4 typeahead
typeahead templates
react-bootstrap-typeahead
typeahead scrollable

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.

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%; }

It "overlaps" the outside of the box like this: I've read extending the width of bootstrap typeahead to match input field but none of these fix it for me. I'm wondering  Podcast #128: We chat with Kent C Dodds about why he loves React and discuss what life was like in the dark days before Git. Listen now.

The dropdown menu is a ul with the classes typeahead dropdown-menu you could use CSS to set it's width:

.dropdown-menu
{
 width: .... px;
}

The width of the span6 is not static, so you will need some media queries to make it responsive.

For Bootstrap 3 the typeahead function is remove from TB3 instead use https://github.com/twitter/typeahead.js/. You will need some additional CSS to integrate it with Twitter's Bootstrap.You'll need to load some additional CSS in order to get the typeahead.js dropdown menu to fit the default Bootstrap's theme. Try extended Bootstrap's LESS or if your are looking for a more a more extended version try: typeahead.js-bootstrap3.less.

The dropdown with is set with the .tt-dropdown-menu class now. In stead of changing the CSS you could also try to set the width dynamic. With typeahead a class of your typeahead input tag:

$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});

Bootstrap ver: 3.2 Typeahead ver: 0.10.5 Issue: When using typeahead 0.10.5 with is automatically resizes to a fixed 120px width and does not allow for auto-​resizing. This input stays at a FIXED WIDTH --> <div class="col-sm-6 col-lg-4"> <div This box shows correctly and resizes correctly --> <div  Q: extending the width of bootstrap typeahead to match input field 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.

To make the dropdown match the field width you'd want something like this:

$(document).on('typeahead:opened', function(event, datum) {
  var width = $(event.target).width();
  $('.tt-dropdown-menu').width(width);
});

Small improvement on the above using event.target and a global document listener.

At normal sizes, the typeahead suggestion list has the whole width of the input But when I set the input width to, say 'span4', the suggestion list remains the same. twbs / bootstrap Expand autocomplete to input size #10. In this tutorial, we are going to see how to create an auto-complete field using Typeahead Library. It is a Twitter Bootstrap library used to add the auto-complete feature to the form input field. By initializing the Typeahead library with the form input field, it shows a list of auto-complete suggestions while typing data in this […]

I'm using Bootstrap 3.2.0 with typeahead.js-bootstrap3.less and nested the input in divs like this:

<div class="form-group">
    <label>my label</label>
    <div class="col-md-4">
        <div class="input-group tt-input-group">
            <input id="mytypeahead" class="form-control" />
        </div>
    </div>
</div>

I also needed to add this to my css:

.tt-input-group {
    width: 100%;
}

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  If you want to add some styles to alter the dimensions of the input, you need to make sure those rules apply to both the query input and the hint input i.e. .twitter-typeahead > input { width : 400 px ; height : 30 px ; }

Here is a pure CSS solution:

Since .dropdown-menu is positioned absolute, adding position: relative; to the div wrapping around your uib-typeahead input field and setting width: 100%; to your .dropdown-menu will fix it.

Your CSS would look something like this:

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Kudos on your work, this is more of a question than an issue, I want to override the dropdown menu on the typeahead to be same width as input. I can achieve this on the console changing the positioning of typeahead-container position to static and then setting dropdown width to 100%.

AngularJS (Angular) native directives for Bootstrap. Popover, Position, Progressbar, Rating, Tabs, Timepicker, Tooltip, Typeahead, can reflow as the collapse element goes from 0px to its desired end width, which can result in height changes. If the specified input matches the format, a new date with the input will be  LESS / CSS code for using typeahead.js with Bootstrap 3 - bassjobsen/typeahead.js-bootstrap-css

Any field that can receive input can be converted into an Autocomplete, This option specifies the manner in which the data that matches the input data is obtained. When extending widgets, you have the ability to override or add to the desc: "the official user interface library for jQuery", }, { value: "Bootstrap", label:  I have a similar problem. I have an array of objects. I would like the typeahead to allow me to specify a field to use to match, and a field to use for display, and another field to use for the value. A match should return an object from my collection. The input field should show the value of the 'display' property.

DOCTYPE html> <html> <head> <meta content="initial-scale=1.0, typeahead</​h1> </div> <label for="bootstrap-typeahead">tokenfield-typeahead</label> <div 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; *border-right-width: 2px; get(query) { var that = this, tokens, matches; tokens = normalizeTokens(​this. Patched jquery-ui-1.8.16.js for twitter bootstrap 2.0 input autocomplete / typeahead - credits

Comments
  • I had to do the same for .tt-hint as well, but this worked for me.
  • I had to make the width of a few more classes 100%.This worked for me .twitter-typeahead, .tt-hint, .tt-input, .tt-dropdown-menu { width: 100%; }
  • I believe .tt-dropdown-menu is now .tt.-menu, so the new thing is: .twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }. What a mess this is.
  • Need to use !important to override other styles in my case (I am using Semantic UI)
  • Thanks. Use $('#yourinput').outerWidth() though to match the input real width
  • this solution with .twitter-typeahead{ width: 100%; } worked for me
  • @MichaelLWatson +1 for the simple and straight forward solution.
  • Thank you works fine, except that the long text being suggested is displayed outside the dropdown.
  • @AhmedAlAbdulaal If your text needs to be trimmed, add this class to it .overflow-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  • this seems to disable the suggestion dropdown disappearing after picking the element
  • 👏This works like a charm in BS4 & TypeAhead 0.11.1 My code is slightly different though: .twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; display: block} Just had to remove !important