Typeahead.js: Textbox size stays fixed with Bootstrap 3.2
Bootstrap ver: 3.2
Typeahead ver: 0.10.5
Issue:
When using typeahead 0.10.5 with Bootstrap 3.2, the textbox is automatically resizes to a fixed 120px width and does not allow for auto-resizing.
For instance, notice that the 2nd textbox will resize and stretches to the full width of it's DIV, where as the one wrapped in DIV ID="the-states" stays at a fixed width. Thus breaking the fluid / adjustable form.
Please address this issue
Workaround: None
Reproduce Sample:
{# Note i'm using the standard typeahead.css v0.10.5, unmodified #}
<head>
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap-theme.min.css" />
<script src="libs/jquery/jquery-1.11.1.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="typeahead.bundle.min.js" ></script>
<link rel="stylesheet" href="typeahead.css" />
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substrRegex;
matches = [];
substrRegex = new RegExp(q, 'i');
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push({ value: str });
}
});
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California'];
$('#the-states .typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
displayKey: 'value',
source: substringMatcher(states)
});
});
</script>
<div class="container-fluid">
<form class="form-horizontal" role="form">
<div class="panel">
<div class="panel-body">
<div class="row">
<!-- This input stays at a FIXED WIDTH -->
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label for="inputEmail" class="col-md-4 control-label">Email:</label>
<div class="col-md-8" id="the-states" >
<input type="text" id="txtInput1"
class="typeahead input-sm form-control"
autocomplete="off"
spellcheck="false"
placeholder="Sales Rep"
/>
</div>
</div><!-- form-group -->
</div><!-- col-sm-6 col-lg-4 -->
<!-- This box shows correctly and resizes correctly -->
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label for="inputPassword" class="col-md-4 control-label">Password:</label>
<div class="col-md-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div><!-- form-group -->
</div><!-- col-sm-6 col-lg-4 -->
</div><!-- row -->
</div><!-- panel-body -->
</div><!-- panel -->
</form>
</div>
</body>
DevChive
All 5 comments
Found the fix, PLEASE INCLUDE THIS IN YOUR DOCUMENTATION!
1) Add the following to typeahead.css
.twitter-typeahead {
width: 100%;
}
2) Add the following to your javascrpit after $("...").typeahead({...});
$(".tt-hint").addClass("form-control");
Great one, thanks.
rauls
on 3 Mar 2015
Great, so much thanks!
kemaldarmawan
on 9 Sep 2015
@DevChive
If you add the width: 100% to the drop down it will extend the entire input too:
.scrollable-dropdown-menu .tt-menu {
width: 100%;
max-height: 150px;
overflow-y: auto;
}
wattry
on 5 Oct 2018
THANK YOU
GolfBrav0
on 12 Aug 2020
Related issues
steswinbank
路
5Comments
viktor-rachuk
路
3Comments
a-lucas
路
5Comments
GreatPotato
路
8Comments
jarrodparkes
路
6Comments
Most helpful comment
Found the fix, PLEASE INCLUDE THIS IN YOUR DOCUMENTATION!
1) Add the following to typeahead.css
2) Add the following to your javascrpit after $("...").typeahead({...});