更改垫子自动完成宽度? [英] Change the mat-autocomplete width?

问题描述

看来< mat-autocomplete> 的宽度始终是我们输入的输入的宽度.没有办法使它变大吗?我的输入量很小，无法读取下拉菜单项.我的表单空间也受到限制，因此无法增大输入范围.

It seems like the <mat-autocomplete> width is always the width of the input we're typing in. Is there no way to make it larger? I have a very small input and can't read the dropdown items. I'm also limited in form space so can't make the input larger.

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

推荐答案

在MatAutocomplete 完全满足您的需求:

@Input()panelWidth:字符串|数字

@Input() panelWidth: string | number

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

Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host.

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

By using this property you are not in the risk of meddling with anything else inherited from cdk-overlay-pane.

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

For further customization you might find this property useful as well:

@Input('class')classList:字符串

@Input('class') classList: string

采用在主机mat-autocomplete元素上设置的类，并将其应用于覆盖容器内的面板，以简化样式.

Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.

这篇关于更改垫子自动完成宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！