«angular-flex-layout» не добавляет поля для «mat-form-fields» на мобильных экранах - PullRequest
Новая
       42

«angular-flex-layout» не добавляет поля для «mat-form-fields» на мобильных экранах

1 голос
/ 03 июля 2019

Я создал адаптивную форму, используя угловой материал и flex-layout. Он отлично работает на экранах рабочего стола и iPad.

Для мобильных устройств я хотел бы выровнять поля формы по центру и добавить поля слева и справа от экрана. Есть ли способ сделать это в flex-layout?

Если нет, то как это можно сделать с помощью пользовательского CSS, используя ngClass.xs? Я пытался установить ширину на 90%, но она не отцентрирована и выглядит странно. 

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

1 Ответ

1 голос
/ 04 июля 2019

проще всего и удобнее было бы установить ngClass.xs на контейнере flex 

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

, где .mobileContainer - 

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

, вот простойдемо https://stackblitz.com/edit/angular-dufpaa

в качестве примечания;

вам не нужно fxFlex.xs="90%" для mat-form-field элементов, поскольку контейнер fxLayout.xs="column" имеет расположение столбцов на экранах xs и fxFlex.xs="90%" означает «взять 90% роста родителей» в колонке.поскольку flex-shrink по умолчанию 1, это не оказывает никакого влияния.

...