时间戳

首页 > 解决方案 > Mat-autocomplete 宽度不会随着输入主机上的动态宽度而调整

css - Mat-autocomplete 宽度不会随着输入主机上的动态宽度而调整

问题描述

我有一个 mat-form-field，里面有一个标准输入，并附加了一个 mat-autocomplete。

    <mat-form-field appearance="fill">
    <mat-label>{{ 'INVENTORY.areaOfBusiness' | translate }}</mat-label>
    <input type="text" matInput
    [matAutocomplete]="businessAreaAuto"
    (keyup)="search($event, 'businessArea')"
    [(ngModel)]="businessArea">
    <mat-icon matSuffix>add</mat-icon>
    <mat-autocomplete #businessAreaAuto="matAutocomplete" (optionSelected)="businessSelection($event)">
      <mat-option *ngIf="bizNoResults === true" class="no-click">{{ 'INVENTORY.no-result' | translate }}</mat-option>
      <mat-option *ngIf="isSearchBiz === true">
        <div class="desktop-spinner">
          <span>{{ 'INVENTORY.searching' | translate }}...</span>     
          <mat-progress-spinner
            diameter = 20
            mode = "indeterminate"
            [value]="value">
          </mat-progress-spinner>
        </div>
      </mat-option>
      <mat-option 
        *ngFor="let bizArea of businessAreaResults | async"
        [value]="bizArea"
        matTooltip="{{bizArea}}">
        {{bizArea}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

在 mat-form-field 上，当应用 mat-focused 类时，我添加了一个过渡宽度：

    mat-form-field {
    margin-left: 24px;
    font-size: 14px;
    width: 170px;
    transition: width .5s ease;
  }
  .mat-focused {
    width: 270px;
  }

但是，当输入进入和失焦时，我遇到了自动完成面板的宽度大小问题。在用户输入文本之前，自动完成面板似乎并没有真正赶上适当的宽度。我还没有在角度材料文档中找到一种方法或输入，它可以很好地使用正确的大小更新自动完成。它似乎在转换过程的不同点捕捉到输入的大小。

任何帮助/建议将不胜感激

stackblitz https://stackblitz.com/edit/angular-yfxr8y

标签： cssangularangular-material

解决方案

在这种情况下，有两个事件，一个是打开 的事件mat-autocomplete，另一个是您的第一次搜索按键触发的事件。

第一个通过_attachOverlay()等于if (!overlayRef)true https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L594创建覆盖

第二个触发else条件，_attachOverlay()因为覆盖已经存在。

// 更新触发器、面板宽度和方向，以防发生任何变化。

https://github.com/angular/material2/blob/master/src/lib/autocomplete/autocomplete-trigger.ts#L601

_attachOverlay()每个事件的调用。

 /** Opens the autocomplete suggestion panel. */
  openPanel(): void {
    this._attachOverlay();
    this._floatLabel();
  }

两者都不是连续的更新“流”，这两个条件都被设计为单一事件。

您可以利用panelWidth输入mat-autocomplete并指定您的宽度270px

<mat-autocomplete #auto="matAutocomplete" panelWidth="270px">

这不会使您的过渡自动调整宽度，但是，如果您希望对其进行动画处理，则需要探索覆盖mat-autocomplete或编写自己的解决方案。

推荐阅读