Comment changer la hauteur dans un mat-form-field

Question

Comment puis-je changer la hauteur dans mat-form-field avec appearance="outline"?

J'ai besoin de réduire le mat-form-field.

Mon exemple d'entrée

Answer 1

C'est ce que j'ai utilisé :

.small-input.mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .25em 0 .75em 0;
    font-size: 14px;
}
.small-input.mat-form-field-appearance-outline .mat-form-field-infix .mat-select-arrow{margin-top: 10px;}
.small-input.mat-form-field-appearance-outline .mat-select-empty + .mat-form-field-label-wrapper .mat-form-field-label{margin-top: -0.75em;}

Answer 2

Voici une autre approche:

/* Remplacements pour Angular Material */
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: #ccc; /* Remplacer la couleur de contour. */
}

.mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .65em 0; /* La valeur originale de haut/bas était de 1em. */
}

.mat-input-element {
  position: relative;
  top:  -1.2em; /* Ajuster en conséquence pour garder le texte de l'espace réservé/entrée centré verticalement. */
}

.mat-form-field-label-wrapper {
  top: -1.2em; /* Ajuster en conséquence pour garder le texte de  centré verticalement. */
}

Answer 3

Comme de nombreux post people l'ont expliqué, les champs de formulaire Material angular sont basés sur la taille de la police, donc pour tous ceux qui veulent définir un champ de formulaire personnalisé, voici mon code pour redimensionner à la fois la hauteur et la largeur sans affecter la taille de la police d'entrée ou l'icône de bascule.

• Définissez à l'intérieur du css du composant ce code et appliquez-le comme une classe à l'étiquette mat-form-field.

  .custom-form-field { width: 200px; font-size: 10px; margin-top: 3px; margin-bottom: -1.25em;

  mat-datepicker-toggle { font-size: 12px; }

  input.mat-input-element { padding-bottom: 2px; font-size: 12px; color: $title-color; } }

Answer 4

Vous pouvez ignorer profondément la valeur de rembourrage du style de contour :

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
  padding: .5em;
}

Pour moi, c'était une bonne solution

Answer 5

Si vous n'utilisez pas 'mat-label' à l'intérieur de 'mat-select', alors le css ci-dessous fonctionnera

::ng-deep {
    .mat-form-field-infix {
        border: 0px !important;
    }
    .mat-form-field-appearance-outline .mat-select-arrow-wrapper {
        transform: none !important;
    }
}

Avant:

Après: