angularjs - 如何增加使用引导 AngularJs 创建的 ng-dropdown-multiselect 的宽度

Question

我使用 AngularJS 和 bootstrap 创建了一个多选下拉菜单，在页面中我包含以下代码：

<div class="row">
                    <div class="col-lg-6">
                        <label>Standards</label>
                        <ng-dropdown-multiselect
                                options="dashboard.example1data"
                                selected-model="dashboard.example1model"
                        style="max-width: 500px;">
                        </ng-dropdown-multiselect>
                    </div>
                </div>

我正在尝试增加下拉菜单的宽度，但我不确定如何实现。有人可以告诉我如何增加“ng-dropdown-multiselect”的宽度。

Answer 1

您将不得不覆盖用于制作下拉按钮的 CSS。

将下面的 CSS 放在<script></script>html 文件之前加载的内部或某些外部 CSS 文件中。

.multiselect-parent .dropdown-toggle {
  width: 400px;
}

.multiselect-parent .dropdown-menu {
  width: 300px;
}

这将解决您的问题。

干杯！！！

Answer 2

这个 CSS 对我有用：

.multiselect-parent {
  width: 100%;
}

.multiselect-parent .dropdown-toggle {
  width: 100%;
}

.multiselect-parent .dropdown-menu {
  width: 100%;
}

Answer 3

你不需要做任何事情，你只需要增加

itemsShowLimit

属性值如

 this.dropdownSettings = {
    singleSelection: false,
    idField: 'item_id',
    textField: 'item_text',
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit: 100,
    allowSearchFilter: true
  };