отрегулируйте высоту раскрывающегося меню, чтобы показать больше параметров (материал AngularJS)

Я новичок в Angularjs Material, так что, может быть, это что-то очевидное, но, похоже, я не могу этого понять.

у меня есть раскрывающееся меню с несколькими вариантами выбора, которое показывает только 4 варианта при первоначальном нажатии, а остальные можно просмотреть / получить доступ, прокрутив вниз. Я пытаюсь расширить это представление до другого статического числа (например, чтобы уместить 8 вариантов без прокрутки).

Я нашел очень похожий вопрос, заданный ранее:

Сделайте множественный выбор для настройки его высота соответствует параметрам без полосы прокрутки

однако, похоже, это не имеет никакого эффекта ни с "размером", ни с "ng-size"

вот мой пример:

<md-input-container>
    <label>Providers</label>
    <md-select ng-size="10" ng-model="vm.selectedProviders" ng-change="vm.prov()" multiple>
        <md-optgroup label="Providers">
            <md-option ng-value="provider.namep" ng-repeat="provider in vm.providers">{{provider.namep}}</md-option>
        </md-optgroup>
    </md-select>
</md-input-container>

javascript html css angularjs angularjs-material
person user3363640    schedule 31.12.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Глядя на документацию md-select, кажется, что атрибута нет который указывает количество отображаемых опций.

Таким образом, другой возможный способ — изменить максимальную высоту, установленную по умолчанию в AngularJS Material. Они установлены так:

md-select-menu, md-select-menu md-content {
    max-height: 256px;
}

У меня по умолчанию отображается 5 вариантов (а не 4). Итак, я добавил это в свой CSS:

md-select-menu, md-select-menu md-content {
    max-height: 385px;
}

И это сделало все теги md-select подходящими для 8 вариантов вместо 5. Число не обязательно должно быть одинаковым для вас, поэтому играйте с высотой, пока вы не будете удовлетворены.

Надеюсь, это поможет.

person Omar Einea    schedule 31.12.2017
comment
Омар, отлично работает! Вы правы, он возвращает 5 значений (включая заголовок). я просмотрел директиву md-select и надеялся, что как-то пропустил ее - person user3363640; 31.12.2017
comment
@OmarEinea, куда идут эти значения? - person Ricky; 09.11.2020
comment
@Ricky в файле CSS вашего проекта. - person Omar Einea; 09.11.2020