Angular Flex layout form fields stretch whole width

Question

I am having the following 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>

which generated the below layout

I want to create a layout where the middle form covers the entire middle space. How can i do this with Angular flexlayout ?

Target layout (not perfect)

Have you tried FxFlex and giving it width? see this tburleson-layouts-demos.firebaseapp.com/#/docs — zetawars

Emilien Emilien · Accepted Answer · 2020-01-16T17:01:20

Could you try this ?

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

You should consider using Gaps...

Angular Flex layout form fields stretch whole width

2 Answers