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

RCC: ajuster la taille de police du conteneur environnant.

Plus long: La fonctionnalité de redimensionnement des champs de formulaire est intégrée à Angular Material, donc sauf si vous souhaitez modifier les proportions relatives dans le champ, vous n'avez pas besoin de vous embourber avec le redimensionnement des composants individuels (voir documentation).

La clé pour ajuster la taille du champ est en fait d'ajuster la taille de police dans le conteneur environnant. Une fois que vous faites cela, tout le reste se mettra à l'échelle avec. par exemple

Avec une taille de police du conteneur de 12px;

    Votre nom

    Votre email

Formulaire résultant:

Avec une taille de police du conteneur de 18px;

Formulaire résultant:

NB

Ce n'est pas une solution pour vous si vous n'êtes pas satisfait du ratio de rembourrage à l'intérieur des formulaires. Cependant, il s'agit d'une question différente de la façon dont vous redimensionnez simplement les formulaires. Le redimensionnement est simple, modifier les ratios de rembourrage et de marge est plus compliqué !

Answer 2

Ajoutez ces lignes à votre CSS dans votre stackblitz original

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label { margin-top:-15px; }
::ng-deep label.ng-star-inserted { transform: translateY(-0.59375em) scale(.75) !important; }

À JOUR: avec transition pour l'étiquette...

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

Answer 3

L'utilisation de la solution de @AkberIqbal a perturbé mon stylage pour les champs de formulaire mat qui n'étaient pas outline. De plus, cette solution n'a pas besoin de !important;. Avec !important;, vous êtes déjà perdu :D.

Voici donc une manière sûre d'ajouter à vos styles globaux : (semble excessif, mais je préfère être prudent que désolé)

mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix  { padding: 0.4em 0px }
mat-form-field.mat-form-field.mat-form-field-appearance-outline > div.mat-form-field-wrapper > div.mat-form-field-flex > div.mat-form-field-infix > span.mat-form-field-label-wrapper { top: -1.5em; }

.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}

Donc comme vous pouvez le constater. Je "piste" chaque classe jusqu'à ce que je trouve un outline! J'aime que le stylage outline ne soit appliqué qu'aux champs outline.

Answer 4

Si quelqu'un souhaite rendre la réponse de Akber Iqbal basée sur des classes (pour avoir les deux tailles disponibles) :

:host ::ng-deep {
  .my-custom-component-small { // ajoutez la classe my-custom-component-small à votre élément mat-form-field
    .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0 !important;}
    .mat-form-field-label-wrapper { top: -1.5em; }

    &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
      transform: translateY(-1.1em) scale(.75);
      width: 133.33333%;
    }
  }
}

En espérant que l'équipe Angular ajoute la prise en charge de l'interface utilisateur à haute densité dans les futures versions (la haute densité fait partie des spécifications de design material).

Answer 5

Les champs de formulaire Material sont basés sur la propriété font-size du champ.

Ne faites pas l'erreur d'ajuster les hauteurs, les marges, etc... du matériel dans votre CSS/SCSS... Les éléments de formulaire Material tels que les champs de saisie et les sélecteurs sont basés sur font-size. De plus, les styles intégrés ne sont pas recommandés, vous pouvez donc simplement ajouter un peu de CSS. L'attribut `appearance est sans importance.

::ng-deep .mat-form-field {
    font-size: 12px; // exemple
}