Проблема с CSS для mat-input и mat-form-field

Question

Я попытался создать стек, но он не принимает мои теги <mat-form-field> и <mat-label> без ошибок, я импортировал необходимые компоненты, но он не работает.

Но, может быть, вы все равно сможете мне помочь, если я опубликую здесь код, у меня возникла проблема с CSS, так как я не знаю, на что нацелиться, чтобы переместить тег <mat-label>, когда я использую <mat-form-field> с 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;
}

это желаемый результат:

так что в основном мне нужно переместить метку, когда поле ввода не затронуто, и оставить его в том же месте, всплывающем над ним, когда оно сфокусировано.

мне кажется, что есть только одно правило для обоих, поэтому, если я переместу нетронутую метку, то будет перемещена и плавающая.

Может кто-нибудь помочь? спасибо

Answer 1

Попробуйте использовать следующую 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;
}

Демо