Change the mat-autocomplete width?

Question

It seems like the width is always the width of the input we\'re typing in. Is there no way to make it larger? I have a very small input and

Answer 1

Apart from what Athan Soulis says, I've found out by sheer coincidence that panelWidth also accepts value "fit", which does exactly what most of us is aiming for (make it as wide as needed). Not sure it's "any CSS sizing value", but it works.

Answer 2

Just add the panelWidth property to the mat-autocomplete

<mat-autocomplete [panelWidth]="300">

Answer 3

I solved it with (dynamic):

 [panelWidth]="'auto'" 

Answer 4

In the document for MatAutocomplete there is a property for exactly what you need:

@Input() panelWidth: string | number

Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host.

By using this property you are not in the risk of meddling with anything else inherited from cdk-overlay-pane.

For further customization you might find this property useful as well:

@Input('class') classList: string

Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.

Answer 5

mat-autocomplete styles are inherited from cdk-overlay-pane. In order to change width use below CSS.

::ng-deep .cdk-overlay-pane {
    /* Do you changes here */
      min-width:450px;
}

You can refer here for full example: https://stackblitz.com/edit/angular-vzetqy