Question

我有以下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”）获取

如何使其宽度与输入相同？

提前致谢。 NM

Answer 1

由于.dropdown-menu的位置是绝对的，因此将position: relative;添加到环绕uib-typeahead输入字段的div中并将width: 100%;设置为.dropdown-menu即可解决此问题。

您的CSS看起来像这样：

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}

uib-typeahead下拉宽度

1 个答案: