Proper way to pad and remove margin from mat-form-field

Question

I'm attempting to do an inline edit function for a first and last name in a user profile. My layout looks like:

However, when I swap from using the standard input tag to using mat-form-field (like I'd like to be using for material), the user details ends up looking like so:

I've attempted to use various CSS to try and get this into place, but I'm unable to get everything back within the user detail line.

Checking it out in inspector, I see that there is a .mat-form-field-infix class that is being used, but I'm not able to override the padding and border-top properties it contains. I'm not sure how to approach altering mat-X elements as it seems material is more meant for keeping things as they come.

I would love some ideas.

HTML

<div fxLayout="column">
    <div fxLayout="row"><span>{{user?.email}}</span></div>
        <div fxLayout="row">
            <div fxLayoutAlign="space-between">
                <form [formGroup]="formGroup">
                    <mat-form-field>
                        <input matInput
                               formControlName="firstName"
                               value="{{user?.firstName}}"/>
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput
                               formControlName="lastName"
                               value="{{user?.lastName}}"/>
                    </mat-form-field>
                </form>
            </div>
            <div>
                <button *ngIf="!edit" mat-icon-button (click)="editClicked()">
                    <mat-icon matTooltip="Edit User">edit</mat-icon>
                </button>
            </div>
        </div>
    </div>

CSS

can you make a https://stackblitz.com/ of this .. it will be much easier to answer — maxkart, Sep 30 '20 at 18:59
@maxkart I've attempted to do this but there is some error between stackblitz and my package versions. My question is pretty specific to mat-form-field and how to style it, so if you want to see what it looks like try making a small example. — expenguin, Sep 30 '20 at 20:01

meblum · Accepted Answer · 2020-10-01T16:31:14.093

5

Here is how to remove the default padding on a mat-form-field:

in your global styles.css add this rule:

.mat-form-field-no-padding .mat-form-field-wrapper {
  margin-bottom: -1.25em;
}

now on your mat-form-field add this class mat-form-field-no-padding

edited Oct 01 '20 at 16:31

answered Sep 30 '20 at 20:30

meblum

1,654
12
23

2

Sadly this made no change to my layout. I still think it has to be on .mat-form-field-infix – expenguin Oct 01 '20 at 12:56
That's what worked for me. The point is that you'll need to override it in the global css file, not in the template css. Also, make sure your selector is more specific than the default one, or use `!important` – meblum Oct 01 '20 at 13:05
I was unaware we couldn't modify mat element styles at the template level, I'll try this again. – expenguin Oct 01 '20 at 13:15
Much better, still a little off but at least its responding now. Thank you @emmbee! – expenguin Oct 01 '20 at 13:17
Youre welcome! Here's the official docs on this https://angular.io/guide/component-styles#view-encapsulation – meblum Oct 01 '20 at 14:29
@expenguin rather than `padding 0`, use `margin-bottom: -1.25em;` see https://stackoverflow.com/questions/53684763/how-to-remove-space-bottom-mat-form-field – meblum Oct 01 '20 at 16:32

Proper way to pad and remove margin from mat-form-field

1 Answers1