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

Question

我堅持讓md-autocomplete的寬度增長到相關mdInput的大小。 這是我的代碼：

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

這是結果圖：

我使用了md-autocomplete和md-autocomplete .mat-autocomplete-panel CSS選擇器，但沒有結果。

Answer 1

我想我找到了答案。我想提醒一下，這是一個試驗n錯誤，我還沒有檢查這個的后果。 請謹慎使用。 這對我有用..我在我的全局CSS文件中為類.cdk-overlay-pane將max-width屬性設置為'none'，將width屬性設置為'auto'，它似乎已經解決了我的問題。 希望它有所幫助...干杯！ 快樂的編碼...... :)

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

Answer 2

試試這個。 如果希望組件樣式級聯到組件的所有子元素，而不是頁面上的任何其他元素：

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

Answer 3

按我的回答對一個類似問題，你現在可以使用新的panelWidth財產。

@Input()
panelWidth: string | number

指定自動完成面板的寬度。 可以是任何CSS大小調整值，否則它將匹配其主機的寬度。

Answer 4

這不起作用。 我已經嘗試過編輯所有的CSS。 我認為他們正在阻止它，因為它還處於測試階段。

我不知道有辦法做到這一點。 :(