更改mat-autocomplete宽度？

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

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 2

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

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

Answer 3

我用（动态）解决了它：

 [panelWidth]="'auto'"

以下也是可能的：

panelWidth="auto"

Answer 4

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

@Input（）panelWidth：字符串| 数

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

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

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

@Input（'class'）classList：字符串

采用在主机mat-autocomplete元素上设置的类，并将它们应用于overlay容器内的面板，以简化样式。

Answer 5

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

Answer 6

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

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

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

1. 通过组件声明中的providers: []在您需要的组件中注入选项

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类

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

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

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