Flexlayout not compatible with material 5

[elineopsommer]

Bug, feature request, or proposal:

Bug
When using flexLayout rows, the two mat-form-fields next to each other do not take the proper space, the two mat-form-fields together should be properly aligned with the third input (email)

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Small piece of code is provided:

<form fxLayout="column" [formGroup]="registerForm">
   <div class="input-row" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="20px">
    <mat-form-field fxFlex>
      <input matInput
             type="text"
             placeholder="FIRSTNAME" formControlName="firstName">
    </mat-form-field>

    <mat-form-field fxFlex>
      <input matInput
             type="text"
             placeholder="LASTNAME" formControlName="lastName">
    </mat-form-field>
  </div>

  <div class="input-row">
    <mat-form-field fxFill>
      <input matInput
             type="email"
             placeholder="EMAIL"
             email
             formControlName="email">
    </mat-form-field>
  </div>
</form>

What is the use-case or motivation for changing an existing behavior?

Existing behaviour broken

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular5, Material 5

[RainingNight]

Not compatible angular5.

[ThomasBurleson]

@RainingNight - The latest release of @angular/flex-layout IS compatible with Angular 5. Please delete your node_modules dir, npm i, and try again.

[ThomasBurleson]

@elineopsommer - Since @angular/material uses custom wrapper elements, you may experience layout issues. However, in this StackBlitz Demo, it appears to be working:

Note: the demo uses latest versions of Angular 5.x, Angular Material 5.x, and Flex-Layout 2 Beta.11

[ThomasBurleson]

Closing as not-an-issue.

[playground]

@ThomasBurleson StackBlitz Demo is not working properly.

[ThomasBurleson]

@playground - The BrowserAnimationsModule was not loaded. Fixed here

[playground]

hmm... @ThomasBurleson still seeing the same behavior with BrowserAnimationsModule loaded.

[ThomasBurleson]

@playground - You realize you never explained what is not working properly. Please provide details.

[playground]

Sorry thought the screenshot explained the first and last name fields should be on the same line.

[ThomasBurleson]

@playground - the Demo uses fxLayout.lt-md="column" mode. So for md or higher, the First and LastName fields are on the same line.

[scorbin]

Still not working if you add more mat-form-field they will overflow the container. Maybe you have to wrap each mat-form-field in a div
Create 5 mat-form-field with fxFlex="1 1 20%"
set mat-form-field min width less then 180px then it works

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}