uib-typeahead 下拉宽度答案

【问题标题】：uib-typeahead dropdown widthuib-typeahead 下拉宽度
【发布时间】：2018-10-30 01:34:02
【问题描述】：

我有以下html结构

    <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>

我将 typeahead-search div 的宽度设置为 100%。但是预输入的宽度大于 div。经检查，100% 的预输入宽度取自最顶部的 div (class="search")

如何使它与输入的宽度相同？

提前致谢。近乎

【问题讨论】：

标签： css angular-ui-bootstrap typeahead angular-ui-typeahead

【解决方案1】：

由于.dropdown-menu 是绝对定位的，将position: relative; 添加到环绕您的uib-typeahead 输入字段的div 并将width: 100%; 设置为您的.dropdown-menu 将修复它。

你的 CSS 看起来像这样：

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}

【讨论】：