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

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

mat-form-fieldで高さを変更するにはどうすればいいですかappearance="outline"?

マットフォームフィールドを縮小する必要があります。

私の入力例

ここに画像の説明を入力してください

ベストアンサー1

更新 - これはAngular 15以降では機能しないようです

Angular の最新バージョン (15 以降?) では、これはもう機能しないようです。代わりに @Neistow の回答を参照してください。https://stackoverflow.com/a/75194777/400790


プレAngular15

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

より長いです:フォームフィールドのサイズを変更する機能は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>

結果形式:

ここに画像の説明を入力してください

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

<div style="font-size: 18px">
  
  <mat-form-field...

</div>

結果形式:

ここに画像の説明を入力してください

注意

フォーム内のパディングの比率に満足できない場合、これは解決策ではありません。ただし、これはフォームのサイズを変更する方法とは別の問題です。サイズ変更は簡単ですが、パディングとマージンの比率を変更するのはより困難です。

おすすめ記事