web-dev-qa-db-ja.com

angular7で、アイテムのリストを表示するときにマット選択の高さを変更するにはどうすればよいですか？

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つしかない場合は、リストを短くしてください。

htmlcssangulartypescriptangular-material
7
Woody

同様の この役立つ回答 同様の質問に対して、この問題を解決する方法はいくつかあり、どのルールを選択するかは、ルールをグローバルに適用するかローカルに適用するかによって異なります。次の例では、コンポーネントの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）

柔軟なオーバーライド

MatSelect （mat-select）で@ Input pannelClassを使用するユースケースに応じて、アプリ内の他の選択から独立して、異なるオーバーライドを適用できます。

styles.css

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

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

select-multiple-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 [〜＃〜]（ツールバーのチェックボックスに注意してください）

3
Gordon Westerman

更新をやり直し、最小ではなく最大の高さを使用してください。

@Input PanelclassのGordans提案を使用する場合は、「[panelClass] = ...」の代わりに「panelClass = ...」を使用してください。そうしないと、スタイル設定は有効になりません。

1
davida227

FWIW、オプションの高さの設定はサポートされていません。

高さを変更するには、CSSハックを行う必要があります。

ソース： https://github.com/angular/material2/issues/8054

0
Ashe Li

マテリアルドキュメントで提案されているように、マットパネルの高さを設定/変更できます ここ など

  • 選択のオーバーレイパネルの最大の高さ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;
0
Anjum....