web-dev-qa-db-ja.com

Angular flex-layout-fxLayoutGapにより、折り返された行の終わりに迷惑なギャップが発生します

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-beta.15
angularangular-materialangular-flex-layout
11
Gerardo Buenrostro González

この問題の答えを探している人は、fxLayoutGapにグリッドを追加する必要があります。 https://github.com/angular/flex-layout/wiki/fxLayoutGap-API のドキュメントには次のように記載されています：

GutterシステムでfxLayoutGapを使用するには、任意のfxLayoutGap値に接尾辞グリッドを追加します。これにより、ホスト要素にマージンを適用し、各子に逆パディングを適用することにより、ガターシステムが作成されます。この変更以外は、デフォルトモードとまったく同じように動作します。また、フレックスオーダー要素と非表示要素も考慮に入れられ、デフォルトのモードと同じ応答能力があります。

標準のギャップ機能とは異なり、gridキーワードを使用したfxLayoutGapは、Host要素のマージンに加えて、Gutterを追加するために各子要素にパディングを適用します。

この最後のポイントは、子要素のグリッドが親要素のfxLayoutGapとどのように干渉するかに関するものであるため、親が子レイアウトをオーバーライドする場合があることに注意してください。 2つの間にdivを追加すると、この問題が解決します。

4
Jessica Crees

表示されないが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で修正すべきものだと思います。

4
G. Tranter

1）fxLayoutGapを削除します。これは、子アイテムにマージン右を追加するためです。

2）子アイテムにスタイルを追加する= margin：0 25px;代わりに。

2
unclepiak