How to remove space bottom mat-form-field
Angular MaterialAngular7Angular Material Problem Overview
Angular Material Solutions
Solution 1 - Angular Material
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.
Solution 2 - Angular Material
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)
Solution 3 - Angular Material
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.
Solution 4 - Angular Material
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.
Solution 5 - Angular Material
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;
}
Solution 6 - Angular Material
or simply:
html
<mat-form-field class="no-bottom">
...
</mat-form-field>
css
.no-bottom {
margin-bottom: -1.25em !important;
}
Solution 7 - Angular Material
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;
}
Solution 8 - Angular Material
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>
Solution 9 - Angular Material
.mat-form-field-infix{
display: block;
position: relative;
flex: auto;
padding: 0;
border-top: 0px solid transparent !important;
}
you can add important in css
Solution 10 - Angular Material
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);
Solution 11 - Angular Material
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.
Solution 12 - Angular Material
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.