В angular7, как я могу изменить высоту циновки, когда показывает список элементов?

Question

В Angular7, как я могу увеличить высоту циновки, когда она показывает предметы?У меня есть следующий файл компонента:

import { Component, ViewEncapsulation } from "@angular/core";
import { FormControl } from "@angular/forms";

/** @title Select with multiple selection */
@Component({
  selector: "select-multiple-example",
  templateUrl: "select-multiple-example.html",
  styleUrls: ["select-multiple-example.css"],
  encapsulation: ViewEncapsulation.None
})
export class SelectMultipleExample {
  toppings = new FormControl();
  toppingList: string[] = [
    "Extra cheese",
    "Mushroom",
    "Onion",
    "Pepperoni",
    "Sausage",
    "Tomato",
    "CBFnTQcZ79AeYrdq",
    "1KiYwRjeqdqjNzVb",
    "TeLvgGl7t3yHDrZE",
    "s3ivzgLZO9qDNovJ",
    "QOOH2MCNRRXVJNwD",
    "1RWqdyPpu8yHSDoO",
    "d3aAOYIWYJE695Lf",
    "JoXDWP6zKSrZTIUc",
    "hpxQKFJsJcgVey5A",
    "UMI0akuHn2M5BaAP",
    "LRnQgNNjpqZwpdzj",
    "ZDIgw68mQyNLtxob",
    "Q6HY6tcqFcySJqD9",
    "WVFSg4TKeEqqoF1g",
    "ka4ORT9rUW8EPaPd",
    "ingfHsjBXAmt7yvo",
    "G3MY6MowhI7s0fN9",
    "ZlWqSoRnlhXQCbYz",
    "gerR70hrO5alwsOR",
    "dk0xrarQzfH6HAdl",
    "D1WCkB9jhhPMiuv7",
    "zPMj4g6Iu52jXqwq",
    "P4OEXKI2FZfFVqVn",
    "xMcOFx5m92d9oGQz",
    "dkyWq0tLJ8wQknaA",
    "iJZUeyjyyn3qQaCT",
    "5KhUjwEJK8wIYkoa",
    "YB3rEUkE12Pf9hcO",
    "qzrzSvzDXukVXvZi",
    "Hr1lccIcJZurLKiL",
    "noQo0pUMBeuQGpcf",
    "Tw4ACNCyDbpMI5MQ",
    "kK3QMSqyrNAwo3J0",
    "lvXP7qEm3biOpVbu",
    "gzy7bHaW2Qq6StN0",
    "GjXJAaRovr5CwHaO",
    "7CfVdILE7RhaVDvI",
    "8i5j8nlokIdkPEoO",
    "XpSWhgdwON3XFI15",
    "w5R5JfrDnuCzhqN7",
    "azhjvfD5geZaKjfc",
    "6y1Zdt18KSRNMdxx",
    "kd5ou8n6Ae5sILpj",
    "2p0YQKWdOvpXo4cD",
    "XfmEOsiIpq4C0PVc",
    "qYIzI8y3vOdx2KJ6",
    "6MzPKWHOn1oFOHpd",
    "tJgyk3p4UIDEj985",
    "RXwLNofzoJHUYgOf"
  ];
}

Где я могу установить ширину с помощью следующих CSS и HTML:

CSS:

 .myFilter .mat-select-trigger {
  min-width: 80vw;
}

HTML:

<mat-form-field>
  <mat-select class="myFilter" placeholder="Pizza Stuff" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

Это нормально, но я хочу иметь возможность устанавливать высоту, а не ширину.Если я попытаюсь изменить CSS следующим образом:

.myFilter .mat-select-trigger {
  max-height: 80vh;
}

, тогда высота поля увеличивается, а не фактический список элементов.Предполагая, что я каким-то образом могу это сделать, как я могу гарантировать, что список не будет превышать количество элементов в массиве toppingList, если, например, данные, содержащиеся в нем, обновлены до

toppingList: string[] = [
    "Extra cheese",
    "Mushroom",
    "Onion",
    "Pepperoni",
    "Sausage",
    "Tomato",
    "CBFnTQcZ79AeYrdq",
    "1KiYwRjeqdqjNzVb",
    "TeLvgGl7t3yHDrZE",
    "s3ivzgLZO9qDNovJ",
    "QOOH2MCNRRXVJNwD",
    "1RWqdyPpu8yHSDoO",
    "d3aAOYIWYJE695Lf",
    "JoXDWP6zKSrZTIUc",
    "hpxQKFJsJcgVey5A"
  ];

Другими словами, если список сокращен, как я могу показать все элементы и удалить полосу прокрутки?Заранее спасибо.

ОБНОВЛЕНИЕ:

Итак, я сделал следующие изменения: CSS:

.myFilter {
  background-color: yellow; /* Added this to check it was working*/
  min-height: 85vh;
}

HTML:

<mat-form-field>
  <mat-select [panelClass]="'myFilter'" placeholder="Pizza Stuff" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

Который имеетизменил высоту на 85vh, но если у меня есть только 5 элементов, я хочу, чтобы список был короче.

Answer 1

При обновлении попробуйте использовать максимальную высоту вместо минимальной.

Если вы используете предложение Гордана о @Input Panelclass, используйте 'panelClass = ... "вместо' [panelClass] = ...', иначе стиль не вступит в силу.

Answer 2

Как и В этом полезном ответе на аналогичный вопрос уже указывается, что существует несколько способов решения этой проблемы, и выбор зависит от того, хотите ли вы применить свои правила на глобальном или локальном уровне.Ни один из следующих примеров не требует, чтобы вы изменили тип ViewEncapsulation вашего компонента.

Локальное переопределение

Используя :: ng-deep , вы можете просто переопределить стили обоихтриггер и панель, которые отображаются в дочерних компонентах вашего компонента. Важно : :: ng-deep помечен как устаревший, и хотя он все еще работает, нет никаких гарантий, что он сделает это в будущем.

select-multiple-example.component.css

::ng-deep .mat-select-trigger {
  min-width: 80vw;
}

::ng-deep .mat-select-panel {
  max-height: 80vh !important;
}

select-multiple-example.component.html

<mat-form-field>
  <mat-select placeholder="ITEMS" multiple>
    <mat-option *ngFor="let item of items" [value]="topping">{{item}}</mat-option>
  </mat-select>
</mat-form-field>

DEMO (Я отредактировал ваш код для демонстрации)

---

Глобальное переопределение

Это позволит применить ваши переопределения ко всем триггерам или панелям в вашем приложении.

styles.css

.mat-select-trigger {
  min-width: 80vw;
}

.mat-select-panel {
  max-height: 80vh !important;
}

DEMO (переопределения можно найти в / assets / styles / material-override.scss)

---

Гибкое переопределение

Использование @ Input pannelClass на вашем MatSelect ( mat-select ) позволит вам применять различные переопределения в зависимости от вашего варианта использования и независимо от других вариантов выбора в вашем приложении.

styles.css

.panel-override {
  max-height: 80vh !important;
}

.panel-override-2 {
  max-height: 100px !important;
}

выберите многодисковый example.component.html

<mat-form-field>
  <mat-select placeholder="ITEMS" multiple [panelClass]="applyPanelOverride2 ? 'panel-override-2' : 'panel-override'">
    <mat-option *ngFor="let item of items" [value]="item">{{item}}</mat-option>
  </mat-select>
</mat-form-field>

DEMO (обратите внимание на флажок на панели инструментов)

Answer 3

FWIW, установка высоты опции никогда не поддерживалась.

Вы должны сделать css hack для изменения высоты.

source: https://github.com/angular/material2/issues/8054

Answer 4

Вы можете установить / изменить высоту матовой панели, как предлагается в документе с материалом здесь , например

• Максимальная высота панели наложения селектора const SELECT_PANEL_MAX_HEIGHT: 256;
• Заполнение панели по оси x const SELECT_PANEL_PADDING_X: 16;
• Заполнение оси x панели с отступом (например, существует группа параметров).const SELECT_PANEL_INDENT_PADDING_X: number;
• Высота выбранных элементов в единицах em.const SELECT_ITEM_HEIGHT_EM: 3;