如何更改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宽度？

回答

相关问题