uib-typeahead dropdown width - css

Question

I have the following html structure
<div class="search">
<div class="input-group">
<div class="input-group-btn" ng-show="categoryEnabled === true">
<div isteven-multi-select
input-model="categories"
output-model="chosenCategories">
</div>
</div>
<div class="typeahead-search">
<input type="text" ng-model="searchData.searchTerm"
placeholder="{{searchPlaceHolder}}"
class="form-control typeahead"
focus-on="categoryComplete" typeahead-min-length="2"
uib-typeahead="item.DisplaySearchText as
item.DisplaySearchText for item in
getProductsForTypeahead($viewValue)">
</div>
<span class="input-group-btn">
<button class="btn btn-default btn-search">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
I set the width of typeahead-search div to 100%.
But the width of the typeahead is bigger than the div.
Upon inspection, the typeahead's width of 100% takes it from the topmost div (class="search")
How do I make it the same width as the input?
Thanks in advance.
NM

Answer 1

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