更改垫子自动完成宽度？答案

【问题标题】：Change the mat-autocomplete width?更改垫子自动完成宽度？
【发布时间】：2018-08-19 10:26:37
【问题描述】：

似乎<mat-autocomplete> 的宽度总是我们输入的输入的宽度。有没有办法让它更大？我的输入很小，无法读取下拉项目。我的表单空间也有限，因此无法使输入变大。

<mat-form-field style="width: 100px;">
  <input matInput [matAutocomplete]="auto">
  <mat-autocomplete style="width: 500px;" #auto="matAutocomplete">
    <mat-option *ngFor="let item of items" [value]="item">
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

【问题讨论】：

标签： angular autocomplete material-design

【解决方案1】：

在MatAutocomplete 的文档中，有一个属性正是您需要的：

@输入() 面板宽度：字符串 |编号

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

通过使用此属性，您不会有干预从 cdk-overlay-pane 继承的任何其他内容的风险。

对于进一步的自定义，您可能会发现此属性也很有用：

@Input('类') 类列表：字符串

获取在主机 mat-autocomplete 元素上设置的类，并将它们应用到覆盖容器内的面板，以便于进行样式设置。

【讨论】：

【解决方案2】：

mat-autocomplete 样式继承自 cdk-overlay-pane。为了改变宽度，请在 CSS 下方使用。

::ng-deep .cdk-overlay-pane {
    /* Do you changes here */
      min-width:450px;
}

您可以在此处参考完整示例： https://stackblitz.com/edit/angular-vzetqy

【讨论】：

width: auto !important; 比min-width 工作得好一点，因为如果不需要，它不会使叠加层变大。然后你也可以使用max-width 来防止它变得不合理。
@checketts 的建议也适用于 MatAutocomplete 答案（Athan 的），例如<mat-autocomplete panelWidth="auto">
如果您有两个面板，而您只想更改其中一个怎么办？

【解决方案3】：

只需将 panelWidth 属性添加到 mat-autocomplete

<mat-autocomplete [panelWidth]="300">

【讨论】：

【解决方案4】：

除了 Athan Soulis 所说的之外，我完全巧合地发现 panelWidth 也接受值“fit”，这正是我们大多数人的目标（使其尽可能宽）。不确定它是“任何 CSS 大小值”，但它有效。

【讨论】：

有没有办法也有一个最大宽度？
更好地使用记录在案的auto value stackoverflow.com/a/51395308/846068

【解决方案5】：

我用（动态）解决了它：

 [panelWidth]="'auto'"

以下也是可能的：

panelWidth="auto"

【讨论】：