2
votes

mat-select: comment afficher toutes les options sans faire défiler?

Je souhaite désactiver la barre de défilement lorsque j'ai plus de 5 options:

Code:

Demo:

J'ai essayé d'utiliser l'option "taille", mais j'ai trouvé qu'elle n'était pas disponible:

<mat-option ng-size=8 *ngFor="let food of foods" [value]="food.value">
  {{food.viewValue}}
</mat-option>

angular sass

1 commentaires

4 Réponses :

1
votes

Vous pouvez modifier la hauteur du panneau de sélection.

Ajoutez ce code à votre styles.css

.mat-select-panel {
  max-height: 400px !important;
}

Le numéro 400px est aléatoire. Si vos données sont trop nombreuses, vous devez en ajouter un plus grand.

0 commentaires

2
votes

//add this code to you styles.css

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

0 commentaires

0
votes

Les réponses précédentes ne fonctionnaient pas directement pour moi et j'avais besoin de :: ng-deep ( / deep / pour être obsolète voir - Que signifient / deep / et :: shadow dans un sélecteur CSS? a >)

::ng-deep .mat-select-panel {
  max-height: 400px!important;
}

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

0 commentaires

1
votes

Ajoutez ce code à votre global styles.css

.my-select.mat-select-panel{
  max-height: none!important;
}

Incluez la propriété panelClass = "my-select" dans le composant mat-select.

1 commentaires

Doit être marqué comme la bonne réponse si vous voulez avoir une hauteur maximale pour une sélection de tapis spécifique