Как я могу увеличить ширину ng-dropdown-multiselect, созданный с помощью начальной загрузки AngularJs

Question

Я создал раскрывающийся список с несколькими вариантами выбора, используя AngularJS и начальную загрузку, и на страницах я включаю следующий код:

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