web-dev-qa-db-fra.com

Comment personnaliser la position du menu déroulant Mat-Select?

Cela fait quelques jours que je n'ai pas trouvé la solution pour cela. Comme il existe une option pour mat-menu qui est la propriété overlaptrigger mais il n'y a pas de propriété pour l'exécuter dans la liste déroulante mat selection. Existe-t-il un moyen de personnaliser la position du menu déroulant Mat-Select en remplaçant le fichier CSS ou une solution plus performante.

angularangular-material
7
Sumit Khanduri
<mat-select placeholder="Language" disableOptionCentering panelClass="myPanelClass">
                    <mat-option *ngFor="let locale of locales" [value]="locale">
                        {{locale}}
                    </mat-option>
                </mat-select>

Utilisez disableOptionCentering et panelClass comme ci-dessus. Puis dans votre styles.scss référencez votre panelClass et faites

    .myPanelClass{
        margin-top: 30px !important; 
    }

Cela a fonctionné pour moi. Notez que le fichier scss doit figurer dans votre fichier styles.scss et non dans le fichier scss de votre composant . Vous n’avez peut-être pas besoin d’utiliser important ici, j’ai d’autres cours sur le sujet, donc je l’ai utilisé.

11
Nicholas Graham

J'ai trouvé la solution sous le nom disableOptionCentering direcrive pour mat-select. Ainsi, après avoir utilisé ce dépôt peut être personnalisé.

de timmoy: https://github.com/angular/material2/pull/9885

Exemple d'utilisation:

<mat-select
    [(ngModel)]="currentPokemon"
    [required]="pokemonRequired" 
    [disabled]="pokemonDisabled" 
    #pokemonControl="ngModel" 
    disableOptionCentering>
<mat-option 
    *ngFor="let creature of pokemon" 
    [value]="creature.value">
{{ creature.viewValue }}
</mat-option>
</mat-select>
3
Nadiia