How to change md-autocomplete width in Angular 2 Material 2?

Question

I'm stuck at making the md-autocomplete's width grow to become the size of the relevant mdInput. Here's my code:

<div class="field">
        <md-input-container class="halfWidth">
            <input mdInput 
            type="text" 
            name="country" 
            [(ngModel)]="model.Country" 
            (ngModelChange)="filterCountries()" 
            [disabled]="progress" 
            [mdAutocomplete]="countriesAutocomplete" 
            placeholder="Country" 
            required />
        </md-input-container>
        <md-autocomplete #countriesAutocomplete="mdAutocomplete" 
            [displayWith]="getCountryName">
            <md-option *ngFor="let country of countries" 
                    [value]="country" 
                    class="fullWidth">
                {{ country.PersianName || country.EnglishName }}
            </md-option>
        </md-autocomplete>
    </div>

And here's the result picture:

I used md-autocomplete and md-autocomplete .mat-autocomplete-panel CSS selectors, but no result.

score 3 · Answer 1 · answered Apr 29 '17 at 10:38

3

I think i found the answer for this.. i would like to caution that it was a trial n error and i haven't checked the consequence of this as yet. Please use it cautiously. Here is what worked for me.. i had set the max-width property to 'none' and width property to 'auto' for class .cdk-overlay-pane in my global CSS file and it seemed to have resolved the issue for me. Hope it helps... cheers! Happy coding ... :)

.cdk-overlay-pane{
max-width:none !important;
width:auto !important;}

answered Apr 29 '17 at 10:38

Navin Hotwani

329
3
8

Worked for me. However, I had to insert this in the global styles.css. It didn't work in the component css, as Angular doesn't mark the overlay pane with the name of the component. That's a pity, because it can't be confined to the component where it's actually needed. – TAM Mar 01 '18 at 10:54

score 2 · Answer 2 · answered Oct 30 '17 at 21:00

2

Try this. If you want your component styles to cascade to all child elements of a component, but not to any other element on the page:

 :host ::ng-deep .mat-autocomplete-panel{
        width:fit-content;
        }

answered Oct 30 '17 at 21:00

ferralucho

637
7
24

score 1 · Answer 3 · answered Jul 18 '18 at 07:01

1

As per my answer to a similar question, you can now use the new panelWidth property.

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

answered Jul 18 '18 at 07:01

Joseph Simpson

4,054
1
24
28

score 0 · Answer 4 · answered May 02 '17 at 22:13

0

That doesn't work. I've tried editing all of the CSS. I think they are preventing it since it's in beta still.

I don't know of a way to do it. :(

answered May 02 '17 at 22:13

dEf

67
2
8

How to change md-autocomplete width in Angular 2 Material 2?

4 Answers4