如何在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。 我认为他们正在阻止它，因为它还处于测试阶段。

我不知道有办法做到这一点。 :(