Angular flex-layout - fxLayoutGap вызывает раздражающий пробел в конце перенесенных строк - PullRequest
Новая
       7

Angular flex-layout - fxLayoutGap вызывает раздражающий пробел в конце перенесенных строк

0 голосов
/ 14 мая 2018

Использование fxLayoutGap и wrap оставляет раздражающее поле в конце каждого обернутого ряда.

Есть ли способ исправить это?

https://stackblitz.com/edit/angular-fxlayoutgap-calc-mralnz?file=app%2Fapp.component.html

<div fxLayout="row wrap" fxLayoutGap="25px">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
</div>

Я использую:

  • @ angular / core @ 6.0.0
  • @ angular / material @ 6.0.1
  • @ angular / flex-layout@ 6.0.0-бета.15

Ответы [ 3 ]

0 голосов
/ 31 июля 2018

1) удалить fxLayoutGap, поскольку он добавляет margin-right к дочернему элементу.

2) добавить стиль к дочернему элементу = margin: 0 25px;вместо этого.

0 голосов
/ 19 июня 2019

Для тех, кто ищет ответ на эту проблему, вам нужно добавить сетку в fxLayoutGap.Документация в https://github.com/angular/flex-layout/wiki/fxLayoutGap-API гласит:

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

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

Эта последняя точка связана с тем, как сетка на дочерних элементах может конфликтовать с fxLayoutGap на родительском элементе, поэтому имейте в видучто родитель может переопределить дочерний макет.Добавление дополнительного div между ними решит эту проблему.

0 голосов
/ 15 мая 2018

Вы можете взломать его, добавив фиктивный компонент в конце, который не отображается, но раскладывается при помощи flex-layout, так что «последнему» полю формы также присваивается дополнительное поле, а затем настраивает поля родительского контейнера. для смещения дополнительного правого поля: 

<div fxLayout="row wrap" fxLayoutGap="25px" style="margin-right:-25px;">
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Name">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Occupation">
  </mat-form-field>
  <mat-form-field fxFlex.xs="calc(50%-25px)" fxFlex="calc(33%-25px)">
    <input matInput placeholder="Company">
  </mat-form-field>
  <span class="cdk-visually-hidden"></span>
</div>

Но я думаю, что это нужно исправить в flex-layout.

...