Change the mat-autocomplete width?

Question

It seems like the <mat-autocomplete> 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 can't read the dropdown items. I'm also limited in form space so can't make the input larger.

<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>

score 43 · Accepted Answer · answered Nov 23 '18 at 13:26

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.

Thanks! I used `panelWidth="auto"` and it looks quite good. – kubicle Aug 10 '22 at 22:03 — kubicle, Aug 10 '22 at 22:03

score 21 · Answer 2 · answered Apr 13 '18 at 16:50

21

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

answered Apr 13 '18 at 16:50

Sai charan Bolisetty

219
1
5

5

`width: auto !important;` works a little better than `min-width` since it won't make the overlay large if it doesn't need to. Then you can use a `max-width` too keep it from getting to unreasonable. – checketts Aug 14 '18 at 20:04
5

@checketts' suggestion also works for the MatAutocomplete answer (Athan's), e.g. `` – Ollie Feb 04 '20 at 00:39
1

What if you have two panels and you only want to change one of them? – Dec 14 '20 at 10:10

score 21 · Answer 3 · edited Feb 18 '20 at 14:33

21

Just add the panelWidth property to the mat-autocomplete

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

edited Feb 18 '20 at 14:33

ChadNC

2,528
4
25
39

answered Feb 18 '20 at 12:33

Pramod Ukkali

261
2
2

user1586746 · Answer 4 · 2021-03-29T12:55:21.187

14

I solved it with (dynamic):

 [panelWidth]="'auto'"

Following is also possible:

panelWidth="auto"

edited Mar 29 '21 at 12:55

answered Feb 12 '21 at 11:57

user1586746

161
2
7

score 7 · Answer 5 · answered Mar 25 '20 at 08:53

7

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.

answered Mar 25 '20 at 08:53

Tom Kokoska

71
1
2

Is there a way to also have a max-width? – Saita Apr 02 '20 at 18:36
1

better to use documented `auto` value https://stackoverflow.com/a/51395308/846068 – Oleg Savelyev Aug 12 '20 at 13:17

score 5 · Answer 6 · answered Apr 28 '22 at 13:03

Angular provides configuration options for autocomplete named MAT_AUTOCOMPLETE_DEFAULT_OPTIONS

Documentation: https://material.angular.io/components/autocomplete/api#MatAutocompleteDefaultOptions

One of the field of that class is overlayPanelClass: string, that allow to set custom class to style cdk-overlay-pane for autocomplete.

Inject options in component that you need, through providers: [] in component declaration

providers: [
        {
            provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
            useValue: { overlayPanelClass: 'autocomplete-overlay' },
        },
    ]

Define your class in styles.scss

.autocomplete-overlay {
    width: unset !important;
}

Set fit-content width for container, in which you display options of autocomplete, I use simplebar, so in my case it .simple-bar-content class

.wrapper-for-simplebar {
    height: 100%;

    ::ng-deep.simplebar-content {
        width: fit-content;
    }
}

If you need to set fixed width use [panelWidth] = "'150px'"

I found myself coming back to this thread as I was styling cdk-overlay globally to handle this, which ended up causing a lot of problems with other things. This answer works incredibly well, and I'd suggest people try it if the other options don't work for you. — James Ives, Jul 22 '22 at 12:45

Change the mat-autocomplete width?

6 Answers6

Linked