CODEWITHSUNDEEP
angularautocompletematerial-design
Ali Fallah
Ali Fallah

Reputation: 753

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

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: enter image description here

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

Upvotes: 4

Views: 3836

Answers (4)

Joseph Simpson
Joseph Simpson

Reputation: 4183

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.

Upvotes: 1

ferralucho
ferralucho

Reputation: 657

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

Upvotes: 2

dEf
dEf

Reputation: 77

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

Upvotes: 0

Navin Hotwani
Navin Hotwani

Reputation: 339

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

Upvotes: 3

Related Questions