How to remove space bottom mat-form-field
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.
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.
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)