angular7에서 항목 목록을 표시할 때 매트 선택의 높이를 변경하려면 어떻게 해야 합니까?

angular7에서 항목 목록을 표시할 때 매트 선택의 높이를 변경하려면 어떻게 해야 합니까?

이 질문에는 이미 다음과 같은 답이 있습니다.

각진 소재에서 스타일링 매트 선택 (10개 답변)

마감됨12개월 전에.

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

그러면 상자의 높이가 증가하고 실제 항목 목록은 증가하지 않습니다. 수 한다면, 제가어든할면가, ▁in▁the▁doesn▁list▁the▁assuming▁beyond▁of▁items▁number?의 항목 수를 넘지 할 수 요?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>

가 높가로변었습니다경되이다▁to로 변경되었습니다.85vh하지만 만약 내가 5개의 아이템만 가지고 있다면, 나는 그 리스트를 더 짧게 원합니다.

유사한 질문에 대한 이 유용한 대답은 이미 이 문제를 해결할 수 있는 몇 가지 방법이 있으며 규칙을 전체적으로 적용할지 로컬로 적용할지에 따라 선택하는 방법이 달라집니다.다음 예제에서는 구성 요소의 View Encapsulation 유형을 변경할 필요가 없습니다.

로컬 재정의

::ng-deep를 사용하면 구성 요소의 하위 구성 요소에서 렌더링되는 트리거와 패널의 스타일을 모두 재정의할 수 있습니다.중요: ::ng-deep는 사용되지 않는 것으로 표시되었으며 여전히 작동하는 동안 미래에 그렇게 할 것이라는 보장은 없습니다.

select-multiple-multiple.component.sys

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

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

select-multiple-multiple.component.sys

<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 (데모를 위해 코드를 편집했습니다)

---

전역 재정의

이렇게 하면 응용 프로그램 내의 모든 트리거 또는 패널에 재정의가 적용됩니다.

스타일, 스타일, 스타일, 스타일

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

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

DEMO(덮어쓰기는 /assets/style/material-override.scss에서 확인할 수 있습니다)

---

유연한 재정의

MatSelect(mat-select)에서 @Input 패널 클래스를 사용하면 사용 사례에 따라 앱의 다른 선택 항목과 독립적으로 다른 재정의를 적용할 수 있습니다.

스타일, 스타일, 스타일, 스타일

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

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

select-multiple-multiple.component.sys

<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(도구 모음의 확인란 참조)

업데이트를 다시 수행하고 최소 대신 최대 높이를 사용합니다.

@InputPanelClass의 Gordans 제안을 사용하는 경우 '[panelClass]=...' 대신 'panelClass=...'를 사용합니다. 그렇지 않으면 스타일이 적용되지 않습니다.

FWIW, 옵션 높이 설정은 지원되지 않습니다.

당신은 높이 변경을 위해 CSS 해킹을 해야 합니다.

출처: https://github.com/angular/material2/issues/8054

언급URL : https://stackoverflow.com/questions/52962476/in-angular7-how-do-i-change-the-height-of-a-mat-select-when-shows-the-list-of-i