web-dev-qa-db-ja.com

mat-inputおよびmat-form-fieldのCSSに関する問題

Stackblitzを実行しようとしましたが、<mat-form-field>タグと<mat-label>タグをエラーなしで受け入れません。必要なコンポーネントをインポートしましたが、機能しません。

しかし、ここにコードを投稿すると、とにかく助けてくれるかもしれません。<mat-label>を使用すると、<mat-form-field>タグを移動する対象がわからないため、CSSに問題があります。ラベルが中央にある場合はappearance="outline"を使用し、input fieldの上に移動できません。中央に配置したいのですが、mat-form-fieldの下部にあります。

position:absoluteの値を調整すると、問題は、クリックが発生したときにラベルがフィールドの上にある場合にも、これらのルールが適用され、フローティングラベルが間違った位置に移動することです。

コード：

<div 
    id="test" 
    fxLayout="row" 
    fxLayoutGap="12px" 
    fxLayoutAlign="start center" 
    [class.hasFocus]="numberMatInput.value">
    <mat-form-field appearance="outline">
         <mat-label>KM</mat-label>
         <input matInput #numberMatInput [formControl]="numberInput">
    </mat-form-field>
</div>

およびCSS：

#test ::ng-deep .mat-form-field-appearance-outline {
  width: 65px;
  height: 45px;
  line-height: 1.725;
}

#test ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
  padding: 0px 10px 0px 10px;
}

#test ::ng-deep .mat-form-field-infix {
  padding: 3px 0 3px 0;
}

これは望ましい結果です：

enter image description here

したがって、基本的には、入力フィールドが変更されていないときにラベルを移動し、フォーカスされているときに上に浮かんでいる同じスペースにラベルを残す必要があります。

私には、両方のルールが1つしかないように思われるので、そのままのラベルを移動すると、フローティングラベルも移動します。

誰かが助けることができますか？ありがとうございました

cssangulartypescriptangular-material
3
AJ989

次のcssを使用してみてください。

#test ::ng-deep .mat-form-field-hide-placeholder .mat-form-field-label-wrapper {
   text-align: center;
   top: -25px;
}

#test ::ng-deep .mat-form-field-should-float {
   text-align: center;
}

デモ

6
kboul