Cómo eliminar el campo de forma de tapete de la parte inferior del espacio

Solución:

Puedes agregar esto en tu css

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

NOTA: A medida que quitas el espacio no puedes poner <mat-hint>hint</mat-hint> o <mat-error>error</mat-error> adecuadamente. El error y la pista entran en el campo de formulario.

Sin uso ::ng-deep(para Angular 8)

Desactive la encapsulación de su componente dentro del cual cambia el relleno.

Puedes hacer esto por

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

Envuelva el componente que desea diseñar en una clase personalizada. Para que no afecte a ninguna otra mat-form-field componentes. Terminemos con esto con my-form-field clase por ahora

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

Puede agregar estos CSS en la hoja de estilo global sin desactivar la encapsulación de vista. Pero el método más elegante es el anterior.

Intente lo siguiente:

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

(Puede seguir la discusión sobre este espacio inferior adicional aquí: https://github.com/angular/components/issues/7975)

En angular 9, pude eliminar los espacios solo agregando lo siguiente en component.scss (las otras respuestas no funcionaron en mi caso):

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

Además, estoy usando apariencia = “esquema”, para otras apariencias, probablemente será necesario cambiar otras clases y propiedades de CSS, ya que puede tener otros elementos.

---

---

Utiliza Nuestro Buscador