angular - 如何更改 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

我想我找到了这个问题的答案.. 我想提醒一下，这是一个试验错误，我还没有检查过这个结果。请谨慎使用。 这是对我有用的.. 我在我的全局 CSS 文件中将 .cdk-overlay-pane 类的最大宽度属性设置为“无”，将宽度属性设置为“自动”，这似乎为我解决了这个问题。希望它能帮助...干杯!快乐的编码......:)

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