更改垫子自动完成宽度？

Question

看起来

<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>

Answer 1

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

@输入() 面板宽度：字符串|数量

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

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

为了进一步定制，您可能会发现此属性也很有用：

@输入('类') 类列表：字符串

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

Answer 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

Answer 3

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

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

Answer 4

我用（动态）解决了它：

 [panelWidth]="'auto'"

以下也是可能的：

panelWidth="auto"

Answer 5

除了 Athan Soulis 所说的之外，我纯粹是巧合地发现 panelWidth 也接受值“fit”，这正是我们大多数人的目标（使其根据需要宽度）。不确定它是“任何 CSS 大小调整值”，但它有效。

Answer 6

Angular 提供了名为自动完成的配置选项 MAT_AUTOCOMPLETE_DEFAULT_OPTIONS

文档：https://material.angular.io/components/autocomplete/api#MatAutocompleteDefaultOptions

该类的字段之一是 overlayPanelClass: string，允许将自定义类设置为 cdk-overlay-pane 样式以实现自动完成。

1. 通过组件声明中的提供者：[]在组件中注入您需要的选项

providers: [
        {
            provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS,
            useValue: { overlayPanelClass: 'autocomplete-overlay' },
        },
    ]

2. 在 styles.scss 中定义你的类

.autocomplete-overlay {
    width: unset !important;
}

3. 设置容器的 fit-content 宽度，在其中显示自动完成选项，我使用 simplebar，所以在我的例子中它是 .simple-bar-content class

.wrapper-for-simplebar {
    height: 100%;

    ::ng-deep.simplebar-content {
        width: fit-content;
    }
}

如果需要设置固定宽度使用 [panelWidth] = "'150px'"

Answer 7

为了使选项与 mat-autocomplete 具有相同的宽度。您只需在面板上设置宽度 100% 并unsetpanelWidth。 示例：

  <mat-form-field style="width: 100%" >

    <mat-autocomplete
      #autoRef="matAutocomplete"
    >
   </mat-autocomplete>