Angular Гибкие поля формы макета растягиваются на всю ширину - PullRequest
Новая
       29

Angular Гибкие поля формы макета растягиваются на всю ширину

0 голосов
/ 16 января 2020

У меня есть следующее html

<div fxLayout="row" fxLayoutAlign="space-between center">
  <mat-chip-list>
    <mat-chip>{{ type | titlecase }} count : {{ count }}</mat-chip>
    <mat-chip *ngIf="filtersActivated" [removable]="true" (removed)="removeFilters()"
      >Filters
      <mat-icon matChipRemove *ngIf="filtersActivated">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
  <form>
    <mat-form-field>
      <mat-label>Field</mat-label>
      <mat-select>
        <mat-option>None</mat-option>
        <mat-option *ngFor="let hint of hints" [value]="hint.field">{{ hint.label }}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Enter search term" aria-label="Hint" [matAutocomplete]="auto" />
      <mat-autocomplete #auto="matAutocomplete"> </mat-autocomplete>
    </mat-form-field>
  </form>
  <div matTooltip="Select filter(s)" *ngIf="displayFilters">
    <button mat-mini-fab color="primary" (click)="openFilterTool()">
      <mat-icon aria-label="Filter settings">search</mat-icon>
    </button>
  </div>
</div>

, сгенерировавшее макет ниже enter image description here

Я хочу создать макет, в котором средняя форма покрывает все среднее пространство. Как я могу сделать это с Angular flexlayout?

Целевой макет (не идеально)

enter image description here

Ответы [ 2 ]

2 голосов
/ 16 января 2020

Не могли бы вы попробовать это? 

<div fxLayout fxLayoutAlign="start center">
  <mat-chip-list>
    <mat-chip>{{ type | titlecase }} count : {{ count }}</mat-chip>
    <mat-chip *ngIf="filtersActivated" [removable]="true" (removed)="removeFilters()"
      >Filters
      <mat-icon matChipRemove *ngIf="filtersActivated">cancel</mat-icon>
    </mat-chip>
  </mat-chip-list>
  <form fxFlex fxLayout fxLayoutAlign="start center">
    <mat-form-field>
      <mat-label>Field</mat-label>
      <mat-select>
        <mat-option>None</mat-option>
        <mat-option *ngFor="let hint of hints" [value]="hint.field">{{ hint.label }}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field fxFlex>
      <input matInput placeholder="Enter search term" aria-label="Hint" [matAutocomplete]="auto" />
      <mat-autocomplete #auto="matAutocomplete"> </mat-autocomplete>
    </mat-form-field>
  </form>
  <div matTooltip="Select filter(s)" *ngIf="displayFilters">
    <button mat-mini-fab color="primary" (click)="openFilterTool()">
      <mat-icon aria-label="Filter settings">search</mat-icon>
    </button>
  </div>
</div>

Вы должны рассмотреть возможность использования Gaps ...

0 голосов
/ 13 февраля 2020 
  <mat-form-field fxFlex>
          <input matInput placeholder="Enter search term" aria-label="Hint" [matAutocomplete]="auto" />
          <mat-autocomplete #auto="matAutocomplete"> </mat-autocomplete>
        </mat-form-field>

Директива fxFlex должна использоваться для элементов в контейнере fxLayout и определяет изменение размера этого элемента в потоке контейнера flexbox.

...