web-dev-qa-db-fra.com

Comment supprimer l'espace en bas du formulaire mat-form-field

enter image description here

J'utilise angular 7 with angular material and I want to remove the space bottom as you see see. J'ai essayé de nombreuses façons mais sans succès).

angular-materialangular7
8
user9714967

vous pouvez l'ajouter dans votre css

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

mais lorsque vous ajoutez ceci, vous ne pouvez pas mettre <mat-hint>hint</mat-hint> ou <mat-error>error</mat-error> correctement. Une erreur et un indice pénètrent dans le champ de formulaire lorsque vous supprimez le remplissage;

Sans utiliser ::ng-deep (pour Angular 8)

Désactivez l'encapsulation de votre composant à l'intérieur duquel vous modifiez le rembourrage.

Vous pouvez le faire en

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

Enveloppez le composant que vous souhaitez styliser dans une classe personnalisée. Cela n'affectera donc aucun autre mat-form-field Composants. Enveloppons cela avec my-form-field classe pour l'instant

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

Vous pouvez ajouter ces CSS dans la feuille de style globale sans désactiver l'encapsulation de la vue. Mais la méthode la plus élégante est celle ci-dessus

15
Akhi Akl

Essayez ce qui suit:

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

(Vous pouvez suivre la discussion sur cet espace inférieur supplémentaire ici: https://github.com/angular/components/issues/7975 )

4
Emerica

Ma solution a été d'utiliser une classe supplémentaire.

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

Le mot-clé! Important est malheureusement nécessaire car il tirera sinon simplement la valeur par défaut à la place.

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

vous pouvez ajouter des éléments importants dans css

0
Tienanhvn

Dans angular 9, j'ai pu supprimer les lacunes uniquement en ajoutant ce qui suit dans le component.scss (les autres réponses n'ont pas fonctionné dans mon cas):

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

En outre, j'utilise apparence = "contour", pour d'autres apparences, il sera probablement nécessaire de changer d'autres classes et propriétés CSS, car il peut avoir d'autres éléments.

0
Rafael Cerávolo

Vous pouvez ajouter une hauteur: 4em à mat-form-field en tant que tel:

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

Je peux supprimer l'espace inférieur de mat-form-field en utilisant le CSS suivant dans style.scss

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