如何在Angular 2 Material 2中更改md-autocomplete宽度？

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.

Answer 1

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

Answer 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;
        }

Answer 3

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.

Answer 4

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. :(