Issue with CSS for mat-input and mat-form-field

Question

I tried doing a stackblitz but it doesn't accept my <mat-form-field> and <mat-label> tags without errors, I imported the needed components but it won't work.

But maybe you can help me anyway if I post here the code, I'm having an issue with CSS as I don't know what to target to move the <mat-label> tag, when I use a <mat-form-field> with appearance="outline" when the label is in the center, over the input field, I can't move it, I want it to be centered, but it's at the bottom of the mat-form-field.

If I adjust the position:absolute values, the problem is, that also when the label goes above the field when a click happens, those rules will be applied as well, moving the floating label in the wrong position.

The code:

<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>

and the 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;
}

this is the wanted result :

so basically I need to move the label when the input field is untouched, and leave it in the same space floating above when it's focused.

to me it seems there is only one rule for both, so if I move the untouched label, the floating one will move as well.

Can someone help? thank you

The class .mat-form-field-appearance-outline doesn't seem to exist? — user184994
– user184994, Commented Aug 30, 2018 at 11:01
it exists, it s what gives the with and the height of the mat-form-field, these classes are directly from the chrome dev tool and they work in my css — AJ-
– AJ-, Commented Aug 30, 2018 at 11:03

kboul · Accepted Answer · 2019-02-12 18:15:06Z

10

Try using the following 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;
}

Demo

edited Feb 12, 2019 at 18:15

answered Aug 30, 2018 at 12:40

kboul

14.7k5 gold badges50 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

harkesh kumar Over a year ago

Good job @kboul thnks anyway

kboul Over a year ago

Thank you @harkeshkumar. Did you face also this issue?

AJ- Over a year ago

thank you very much! I literally found a solution 1 min before you posted, but yours seems much cleaner! I abused !important and targeted the 3 instances (label inside, label above, and label above with input not empty) as I did a change and instead to have the floating label in the center but in the left corner, could you help me apply your solution to the current styling? stackblitz.com/edit/angular-chtqjk-2qmksf

kboul Over a year ago

Just replace your css with mine: stackblitz.com/edit/angular-chtqjk-gbkb4f. You can check also the demo I included in the answer.

AJ- Over a year ago

I think I prefer it on the side the label! if it's not too much complicated to push the floating label on the side, otherwise it's good like this, thank you very much for the help anyway!

|

Collectives™ on Stack Overflow

Issue with CSS for mat-input and mat-form-field

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related