angularjs UI select 多选后页面闪动的解决方案_select 列表变了已选内容会闪一下-优快云博客

本文介绍了如何通过修改CSS样式来优化UI-Select组件的显示效果，包括调整输入框位置及最小高度等，确保与form-control元素保持一致的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.ui-select-multiple.ui-select-bootstrap {
    height: auto;
    min-height: 34px;
   /* padding: 3px 3px 0 3px;*/
    padding: 4px 4px 3px 4px;
}

.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
    background-color: transparent !important; /* To prevent double background when disabled */
    border: none;
    outline: none;
    height: 1.666666em;
    margin-bottom: 3px;
    position: absolute;
}

1.在

ui-select-multiple.ui-select-bootstrap input.ui-select-search

下添加 position:absolute;
2.在

ui-select-multiple.ui-select-bootstrap

下添加 min-height:34px;
这个高度的值是根据form-control的高度来确定的

  <div class="row">
                            <div  class="col-md-3">
                                <label>label名</label><br />
                                <input type="text" class="form-control" placeholder="" ng-model="name" required>
                            </div>
                            <div  class="col-md-8">
                                <label>label名</label>
                                <ui-select  multiple ng-model="aaa.selected" theme="bootstrap"
                                            search-enabled="false" close-on-select="false" ng-disabled="!data ">
                                    <ui-select-match placeholder=""> {{$item.name}}</ui-select-match>
                                    <ui-select-choices repeat="item in data | filter: $select.search">
                                        <div ng-bind-html="item.name | highlight: $select.search"></div>
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                        </div>

https://github.com/angular-ui/ui-select/issues/533

参考这个得到的灵感