How to remove space bottom mat-form-field

Question

I use angular 7 with angular material and i want to remove the space bottom as you can see. I tried many way but no sucess.

Answer 1

You can add this in your css

::ng-deep .mat-form-field-wrapper{
   margin-bottom: -1.25em;
}

NOTE: As you remove the space you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly. Error and hint get inside the form-field.

Without using ::ng-deep( for Angular 8 )

Turn off encapsulation of your component inside which you change the padding.

You can do this by

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

Wrap the component you want to style in a custom class. So it wont affect any other mat-form-field components. Let's wrap this with with my-form-field class for now

<mat-form-field class="my-form-field">
  <input matInput placeholder="Input">
</mat-form-field>

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

You can add these css in global stylesheet without turning off view encapsulation. But the more elegant method is the above one.

Answer 2

For anyone reading this in 2023: Angular 15 now added a new property to the form fields: subscriptSizing.

If you add subscriptSizing="dynamic" to mat-form-field, it'll remove the space until an error or hint actually needs to get displayed and only then expands. This causes a layout shift, but depending on your use case it is probably the better option than manually adding a margin as suggested (and necessary up to version 14) before.

For reference see https://material.angular.io/components/form-field/api#SubscriptSizing

You can also specify this globally as default via the MAT_FORM_FIELD_DEFAULT_OPTIONS injection token; see https://material.angular.io/components/form-field/api#MatFormFieldDefaultOptions

// in main.ts (Angular 15+)
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
      useValue: {
        subscriptSizing: 'dynamic'
      }
    }
  ],
});

Answer 3

Try the following:

<mat-form-field style="margin-bottom: -1.25em">

(You can follow the discussion about this extra bottom space here: https://github.com/angular/components/issues/7975)

Answer 4

In angular 9, I was able to remove the gaps only by adding the following into the component.scss (the other answers didn't worked in my case):

:host ::ng-deep .mat-form-field-wrapper{
  margin: 0 !important;
  padding: 0;
}

Also, I'm using appearance="outline", for other appearances, it will probably be necessary to change other css classes and properties, since it may have other elements.

Answer 5

My solution was to use an additional class.

HTML:

<mat-form-field class="no-padding">
    <input type="number" matInput placeholder="Speed" [ngModel]="speed"
           (ngModelChange)="onSpeedChange('speed', $event)"/>
  </mat-form-field>

SCSS:

.no-padding {
  .mat-form-field-wrapper {
    padding-bottom: 0 !important;
  }
}

The !important keyword is unfortunately necessary as it will otherwise just pull in the default instead.

Answer 6

or simply:

html

<mat-form-field class="no-bottom">
...
</mat-form-field>

css

.no-bottom {
  margin-bottom: -1.25em !important;
}

Answer 7

I test by Angular 10, this works:

:host ::ng-deep .mat-form-field-wrapper{
  margin: 0 !important;
  padding: 0;
}

Also, if you need to apply ONLY on a special field, define a class:

    <mat-form-field appearance="outline" class="no-wrapper">
      <input matInput>
    </mat-form-field>

And put class name in your css:

    :host ::ng-deep .no-wrapper .mat-form-field-wrapper{
      margin: 0 !important;
      padding: 0;
     }

Answer 8

I am able to remove bottom space of mat-form-filed by using following css in style.scss

.mat-form-field-wrapper{
    padding-bottom: 10px;
}

Answer 9

What about the following template:

<mat-form-field appearance="standard" class="compact-input">
  <mat-label>Test</mat-label>
  <input matInput>
</mat-form-field>

and the following SCSS:

.compact-input {
  .mat-form-field-flex {
    padding-top: 0;
  }

  .mat-form-field-wrapper {
    padding-bottom: 0;
  }

  .mat-form-field-underline {
    bottom: 0;
  }
}

Only tested for standard appearance though.

Don't forget to add encapsulation: ViewEncapsulation.None to your component. If you put the SCSS in the global styles, you might need to add some !important's.

Answer 10

.mat-mdc-form-field-subscript-wrapper {
    display: none;
}

Answer 11

.mat-form-field-infix{
    display: block;
    position: relative;
    flex: auto;
    padding: 0;
    border-top: 0px solid transparent !important;
}

you can add important in css

Answer 12

You can add height:4em to mat-form-field as such:

    <mat-form-field
        class="height-4em"
        appearance="outline"
        >
        <mat-label>Favorite food</mat-label>
        <input matInput placeholder="Ex. Pizza" value="Sushi">
    </mat-form-field>

Answer 13

dont use ::ng-deep
this is simple.. add this to your css file

mat-form-field{
    margin-bottom: -1.25em
}

Answer 14

By changing the font size with material theme you will get smaller input

$typography: mat-typography-config(
  $input: mat-typography-level(14px, 1.125, 400),
);

@include mat-core($typography);

Answer 15

I had a similar problem w/ mat-fab button when using it together w/ mat-spinnner. Whenever the spinner would be "activated" the elements around would shift down. The problem was w/ .mat-fab .mat-button-wrapper which comes from an embedded wrapping span element of mat-spinner after rendering.

Setting,

::ng-deep .mat-fab .mat-button-wrapper {
  padding: 0;
  vertical-align: middle;
}

solved the problem. The vertical-align is not needed but aligns nicely the spinner w/in the mat-fab button.

Answer 16

My solution: Adding a custom class to mat-form-field and targeting the .mat-mdc-form-field-bottom-align class to give its display property a value of none did the trick in my case.

::ng-deep .my-form-field .mat-mdc-form-field-bottom-align {
    display: none !important;
}
<mat-menu #menu="matMenu">
  <ng-container *ngIf="currentPage === 1">
    <mat-form-field class="my-form-field" style="padding:10px;">
      <input matInput>
    </mat-form-field>
  </ng-container>
</mat-menu>

Answer 17

With Angular 16

   .mat-mdc-form-field-bottom-align::before {
      display: none !important;
    }

but set it in style.css on the root of the folder, not in css of the component..