web-dev-qa-db-ja.com

マットフォームフィールドの高さを変更する方法

mat-form-fieldでappearance="outline"を使用して高さを変更するにはどうすればよいですか？

マットフォームフィールドを減らす必要があります。

私の入力例

enter image description here

cssangulartypescriptangular-materialmat-input
23
Stack Overflow

これらを 元のstackblitz のCSSに追加します

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

[〜＃〜]更新[〜＃〜]：ラベルの遷移あり...

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}
25
Akber Iqbal

@AkberIqbalのソリューションを使用すると、outlineではないマットフォームフィールドのスタイルがめちゃくちゃになりました。また、このソリューションは!important;を必要としません。 !important;を使用すると、すでに失われています：D。

だからここにあなたのグローバルスタイルに追加する安全な方法があります：（やり過ぎのようですが、申し訳ありませんが私はむしろ救われています）

mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  { padding: 0.4em 0px }
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; }

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

あなたが見ることができるように。アウトラインを見つけるまで、私はすべてのクラスを「狩り」ます！ アウトラインスタイリングがアウトラインフィールドにのみ適用されるのが好きです。

10
Andre Elrico

TLDR：周囲のコンテナのフォントサイズを調整します。

長い：フォームフィールドのサイズを変更する機能は、Angular Materialに組み込まれているため、相対的な比率を変更したくない場合を除きます現場では、個々のコンポーネントのサイズを変更することで泥だらけにする必要はありません（ ドキュメントを参照 ）。

フィールドサイズを調整するための鍵は、実際には、周囲のコンテナのフォントサイズを調整することです。これを実行すると、他のすべてがそれに合わせてスケーリングされます。例えば.

コンテナのfont-size：12px;

<div style="font-size: 12px">

  <mat-form-field appearance="outline">
    <mat-label>Your name</mat-label>
    <input matInput placeholder="Jane Doe">
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>Your email</mat-label>
    <input matInput placeholder="[email protected]">
  </mat-form-field>

</div>

結果のフォーム：

enter image description here

コンテナのfont-size：18px;

<div style="font-size: 18px">

  <mat-form-field...

</div>

結果のフォーム：

enter image description here

NB

マテリアルフォームのデフォルトのパディングに満足できない場合、これは解決策ではありません。ただし、フォームのサイズを変更する方法とは別の問題です。サイズ変更は簡単です、パディングなどを変更することはより毛深いです！

8
Peter Nixey

誰かがAkber Iqbalの回答をクラスベースにしたい場合（両方のサイズを利用可能にするため）：

:Host ::ng-deep {
  .my-custom-component-small { // add my-custom-component-small class to your mat-form-field element
    .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;}
    .mat-form-field-label-wrapper { top: -1.5em; }

    &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
      transform: translateY(-1.1em) scale(.75);
      width: 133.33333%;
    }
  }
}

うまくいけば、Angularチームは、将来のリリースで高密度UIのサポートを追加します（高密度は 材料設計仕様）の一部です ）。

1
Wildhammer

高さ32ピクセルで、角を丸くできるフィールドに対する最近の私の解決策を次に示します。

  & .mat-form-field-wrapper {
    height: 44.85px;

    & .mat-form-field-flex {
      height: 32px;

      & .mat-form-field-outline {
        $borderRadius: 25px;
        height: 28px;

        & .mat-form-field-outline-start {
          border-radius: $borderRadius 0 0 $borderRadius;
          width: 13px !important; // Override Material in-line style
        }

        & .mat-form-field-outline-end {
          border-radius: 0 $borderRadius $borderRadius 0;
        }
      }

      & .mat-form-field-infix {
        left: 4px;
        padding: 0;
        top: -7px;

        & .mat-form-field-label,
        & .mat-input-element {
          font-size: 12px;
        }

        & .mat-form-field-label-wrapper {
          top: -1.04375em;

          & .mat-form-field-label {
            height: 16px;
          }
        }
      }
    }
  }
0
Russ