Parece que el ancho de <mat-autocomplete> es siempre el ancho de la entrada que estamos escribiendo. ¿No hay forma de hacerlo más grande? Tengo una entrada muy pequeña y no puedo leer los elementos desplegables. También estoy limitado en el espacio de formulario, por lo que no puedo hacer que la entrada sea más grande.
<mat-form-field style="width: 100px;"> <input matInput [matAutocomplete]="auto"> <mat-autocomplete style="width: 500px;" #auto="matAutocomplete"> <mat-option *ngFor="let item of items" [value]="item"> </mat-option> </mat-autocomplete> </mat-form-field>En el documento de MatAutocomplete hay una propiedad para exactamente lo que necesita:
@Input() ancho del panel: cadena | número
Especifique el ancho del panel de autocompletar. Puede ser cualquier valor de tamaño de CSS; de lo contrario, coincidirá con el ancho de su host.
Al usar esta propiedad, no corre el riesgo de entrometerse con nada más heredado de cdk-overlay-pane.
Para una mayor personalización, también puede encontrar útil esta propiedad:
@Input('clase') classList: cadena
Toma las clases establecidas en el elemento host mat-autocompletar y las aplica al panel dentro del contenedor de superposición para permitir un estilo sencillo.
Los estilos mat-autocompletar se heredan de cdk-overlay-pane. Para cambiar el ancho, use debajo de CSS.
::ng-deep .cdk-overlay-pane { /* Do you changes here */ min-width:450px; }Puede consultar aquí para ver un ejemplo completo: https://stackblitz.com/edit/angular-vzetqy
Simplemente agregue la propiedad panelWidth a mat-autocompletar
<mat-autocomplete [panelWidth]="300">