如何在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

我想我找到了答案。我想提醒一下，这是一个试验性的错误，我还没有检查过这个问题的后果。请谨慎使用。 这对我有用.. 我已将max-width属性设置为＆＃39; none＆＃39;和宽度属性为＆＃39; auto＆＃39;对于我的全局CSS文件中的类.cdk-overlay-pane，它似乎已经为我解决了这个问题。希望它有所帮助...干杯！快乐的编码... :)

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

Answer 2

试试这个。如果您希望组件样式级联到组件的所有子元素，而不是页面上的任何其他元素：

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

Answer 3

根据我对类似问题的https://symfony.com/doc/master/bundles/EasyAdminBundle/integration/vichuploaderbundle.html#uploading-the-images-in-the-edit-and-new-views，现在您可以使用新的answer属性。

@Input()
panelWidth: string | number

  

指定自动完成面板的宽度。可以是任何CSS尺寸   值，否则它将匹配其主机的宽度。

Answer 4

这不起作用。我已经尝试过编辑所有的CSS。我认为他们正在阻止它，因为它还处于测试阶段。

我不知道如何做到这一点。 ：（