uib-typeahead dropdown width

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