fix width

[mef]

Width of the typeahead text inputs don't match with other bootstrap input

This happens at least in the sample code below. The typeahead-country text input is shorter than the last-name text input.

<div class="form-group col-sm-8">
    <label for="last-name" class="control-label">Last name</label>
    <input type="text" class="form-control" required name="last-name" id="last-name" placeholder="Last name">
</div>

<div class="form-group col-sm-8">
    <label for="country" class="control-label">Country</label>
    <input type="text" class="form-control" required name="country" id="country" placeholder="Country">
</div>
<script>$('#country').typeahead(/*options*/)</script>

In case this happens all the time, how about adding the following rule to the less file to fix the issue ?

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

[bassjobsen]

Thanks for posting your issue and solution. I understand your issue, but i wonder if your fix won't mess up other things, for instance input not wrapped inside a container

[aksharpatel47]

I can confirm this bug. Whichever input we add typeahead to, it becomes shorter than it's bootstrap counterpart. I have used your css and it's quite at home with the bootstrap theme. Can you fix this bug please?

[bassjobsen]

thanks for posting your issues and bugs, should be fixed now

[Jarvizx]

maybe //hack?

.twitter-typeahead > .form-control{
  width: inherit !important;
}