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

我被困在使md-autocomplete的寬度增長成爲相關mdInput的大小。這裏是我的代碼：如何更改Angular 2 Material 2中的md-autocomplete寬度？

<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選擇器，但沒有結果。

來源

2017-04-24 ali fallah

我想我找到了這個..我想提醒大家，這是一個試驗n錯誤和我沒有檢查這個後果尚未答案。請謹慎使用它。這裏是我工作.. 我已經設定的最大寬度屬性在我的全局CSS文件「沒有」和寬度屬性爲「自動」類.cdk疊加窗格，它似乎已經解決了這個問題爲了我。希望它有助於......歡呼！快樂編碼... :)

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

來源

2017-04-29 10:38:00

爲我工作。然而，我不得不在全局styles.css中插入它，它在組件css中不起作用，因爲Angular沒有用組件的名稱標記覆蓋窗格，這太遺憾了，因爲它不能侷限於組件的位置它實際上是需要的。 – TAM

這是行不通的。我試過編輯所有的CSS。我認爲他們正在阻止它，因爲它還處於測試階段。

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

來源

2017-05-02 22:13:30 dEf

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

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

來源

2017-10-30 21:00:45 ferralucho

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

回答

相關問題