web-dev-qa-db-fra.com

Dans angular7, comment puis-je changer la hauteur d'un tapis-select lorsque s'affiche la liste des éléments?

Dans Angular7, comment puis-je augmenter la hauteur d'un tapis-select lorsqu'il affiche les éléments? J'ai le fichier composant suivant:

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

Où je peux définir la largeur avec le CSS et le html suivants:

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>

Ce qui est bien, mais je veux pouvoir régler la hauteur et non la largeur. Si j'essaye de changer le CSS en ceci:

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

alors la hauteur de la boîte augmente et non la liste réelle des éléments. En supposant que je suis en mesure de le faire, comment puis-je m'assurer que la liste ne s'étend pas au-delà du nombre d'éléments dans le tableau toppingList si, par exemple, les données qu'il contient sont mises à jour pour

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

En d'autres termes, si la liste est réduite, comment puis-je afficher tous les éléments et supprimer la barre de défilement? Merci d'avance.

METTRE À JOUR:

J'ai donc apporté les modifications suivantes: 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>

Ce qui a changé la hauteur en 85vh mais si je n'ai que 5 articles, je veux que la liste soit plus courte.

htmlcssangulartypescriptangular-material
7
Woody

Comme cette réponse utile à une question similaire indique déjà qu'il existe deux façons de résoudre ce problème et celle que vous choisissez dépend de si vous souhaitez appliquer vos règles à l'échelle mondiale ou locale. Aucun des exemples suivants ne vous oblige à modifier le type ViewEncapsulation de votre composant.

Remplacement local

En utilisant :: ng-deep , vous pouvez simplement remplacer les styles du déclencheur et du panneau qui sont rendus dans les composants enfants de votre composant. Important : :: ng-deep a été marqué comme obsolète et bien qu'il fonctionne toujours il n'y a aucune garantie qu'il le fera à l'avenir.

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>

DÉMO (J'ai édité votre code dans le but de la démo)

Remplacement global

Cela appliquera vos remplacements à tous les déclencheurs ou panneaux de votre application.

styles.css 

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

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

DÉMO (les remplacements peuvent être trouvés dans /assets/styles/material-override.scss )

Remplacement flexible

Utiliser le @ Input pannelClass sur votre MatSelect ( mat-select ) vous permettra d'appliquer différents remplacements en fonction de votre cas d'utilisation et indépendamment des autres sélections de votre application.

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>

DÉMO (notez la case à cocher dans la barre d'outils)

3
Gordon Westerman

Pour la mise à jour, essayez d'utiliser la hauteur max au lieu de min.

Si vous utilisez la suggestion Gordans de @Input Panelclass, utilisez 'panelClass = ... "au lieu de' [panelClass] = ... ', sinon le style ne prendra pas effet.

1
davida227

FWIW, la définition de la hauteur de l'option n'a jamais été prise en charge.

Vous devez faire du hack css pour changer la hauteur.

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

0
Ashe Li

Vous pouvez définir/modifier la hauteur du panneau de tapis comme suggéré dans le document matériel ici tel que

  • La hauteur maximale du panneau de superposition de la sélection const SELECT_PANEL_MAX_HEIGHT: 256;
  • Rembourrage du panneau sur l'axe x const SELECT_PANEL_PADDING_X: 16;
  • Remplissage de l'axe x du panneau s'il est en retrait (par exemple, il existe un groupe d'options). const SELECT_PANEL_INDENT_PADDING_X: number;
  • La hauteur des éléments sélectionnés en unités em. const SELECT_ITEM_HEIGHT_EM: 3;
0
Anjum....