angular-flex-layout не добавляет поля для матовых полей форм на мобильных экранах

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

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

Если нет, то как это можно сделать с помощью пользовательского 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>

angular css angular-flex-layout angular-material-7
person LearningDeveloper    schedule 03.07.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

<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, это не дает никакого эффекта.

person ysf    schedule 03.07.2019
comment
Спасибо, отлично работает. Было бы хорошо, если бы fxLayoutGap.gt-xs="2%" применялся на экранах мобильных устройств автоматически. - person LearningDeveloper; 04.07.2019
comment
я рад, что это помогло. fxLayoutGap.gt-xs означает экраны больше xs. если вы хотите, чтобы он применялся и к xs экранам, просто удалите отзывчивый селектор и используйте его как fxLayoutGap="2%" - person ysf; 04.07.2019
comment
Я имел в виду, что было бы здорово, если бы margin-left и margin-right добавлялись автоматически. Вместо того, чтобы делать это с помощью CSS. - person LearningDeveloper; 04.07.2019
comment
извините, я ошибся. fxLayoutGap - это расстояние между элементами гибкости. поэтому с fxLayoutGap добиться того, чего вы хотите, невозможно. И имхо, дело с ngClass.xs не в хакерских атаках, а в том, как это сделать. - person ysf; 04.07.2019

arrow_upward
0
arrow_downward 

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

измените fxLayoutGap.gt-xs = "2%" на fxLayoutGap = "20px".

person Murugan    schedule 30.07.2019