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

Question

我使用 AngularJS 和 bootstrap 创建了一个多 select 下拉列表，并且在页面中包含以下代码：

<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> 或某些外部 CSS 文件中，该文件在 html 文件之前加载。

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

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

How can I increase the width of ng-dropdown-multiselect created using bootstrap AngularJs

angularjs

angular-ui-bootstrap

ng-dropdown-multiselect