1

I've created a responsive form using angular material and flex-layout. It is working fine on desktop and ipad screens.

For mobile devices, I'd like to align the form fields to the center and add a margin to the left and right of the screen. Is there a way to do it in flex-layout?

If not how can it be done with custom CSS using ngClass.xs? I've tried setting the width to 90% but it's not centered properly and look odd.

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="2%" fxLayoutAlign="center">

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 1</mat-label>
    <input matInput placeholder="Field 1">
    <mat-icon matSuffix>place</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 2</mat-label>
    <input matInput placeholder="Field 2">
    <mat-icon matSuffix>business</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 3</mat-label>
    <input matInput placeholder="Field 3">
    <mat-icon matSuffix>send</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 4</mat-label>
    <input matInput placeholder="Field 4">
  </mat-form-field>

</div>
LearningDeveloper
  • 638
  • 2
  • 11
  • 23

2 Answers2

1

easiest and most convenient would be to set ngClass.xs on flex container

<div class="container" fxLayout="row" fxLayout.xs="column" 
     fxLayoutGap.gt-xs="2%"  fxLayoutAlign="center" ngClass.xs="mobileContainer">

where .mobileContainer is

.mobileContainer mat-form-field {
  margin: 8px 16px;
}

here is a simple demo https://stackblitz.com/edit/angular-dufpaa

as a side note;

you don't need fxFlex.xs="90%" on mat-form-field elements because of fxLayout.xs="column" container has column layout on xs screens and fxFlex.xs="90%" means "take 90% of parents' height" on column layout. as flex-shrink defaults to 1 this doesn't make any effect.

ysf
  • 4,634
  • 3
  • 27
  • 29
  • Thanks, this works great. It would have been good if the `fxLayoutGap.gt-xs="2%"` was applied on mobile screens automatically. – LearningDeveloper Jul 04 '19 at 09:26
  • 1
    i am glad that it helped. `fxLayoutGap.gt-xs` means "screens greater than xs". if you want it applied to `xs` screens as well, then just remove responsive selector and use it as `fxLayoutGap="2%"` – ysf Jul 04 '19 at 09:32
  • What I meant is, it would have been great if it added the `margin-left` and `margin-right` automatically. Instead of doing this hack with CSS. – LearningDeveloper Jul 04 '19 at 09:50
  • 1
    sorry i got it wrong. `fxLayoutGap` is the space between flex items. so it is not possible to achieve what you want with `fxLayoutGap`. and imho, the thing with `ngClass.xs` is not a hack it is the way how to do it. – ysf Jul 04 '19 at 10:07
0
<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutAlign="center">

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 1</mat-label>
    <input matInput placeholder="Field 1">
    <mat-icon matSuffix>place</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 2</mat-label>
    <input matInput placeholder="Field 2">
    <mat-icon matSuffix>business</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 3</mat-label>
    <input matInput placeholder="Field 3">
    <mat-icon matSuffix>send</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 4</mat-label>
    <input matInput placeholder="Field 4">
  </mat-form-field>

</div>

change fxLayoutGap.gt-xs="2%" to fxLayoutGap="20px".

Murugan
  • 615
  • 5
  • 19