web-dev-qa-db-fra.com

Comment changer la hauteur dans le champ mat-form-field

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

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

Mon exemple d'entrée

enter image description here

cssangulartypescriptangular-materialmat-input
23
Stack Overflow

Ajoutez-les à votre CSS dans le votre stackblitz d'origine

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

[~ # ~] mis à 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%;
}
25
Akber Iqbal

L'utilisation de la solution de @ AkberIqbal a gâché mon style pour les champs mat-form 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 un moyen sûr d'ajouter à vos styles globaux: (semble exagéré, mais je préfère être sauvé 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%;
}

Comme vous pouvez le voir. Je "traque" chaque classe jusqu'à ce que j'aie trouvé un plan! J'aime que le style de contour ne soit appliqué qu'aux champs de contour.

10
Andre Elrico

TLDR: ajustez la taille de police du conteneur environnant.

Plus long: La fonctionnalité de redimensionnement des champs de formulaire est intégrée dans Angular Material donc à moins que vous ne vouliez changer des proportions relatives sur le terrain, vous n'avez pas besoin de vous embrouiller avec le redimensionnement des composants individuels ( voir documentation ).

La clé pour ajuster la taille du champ est en fait juste ajuster la taille de la police dans le conteneur environnant. Une fois que vous avez fait cela, tout le reste évoluera avec. par exemple.

Avec la taille de police du conteneur: 12px;

<div style="font-size: 12px">

  <mat-form-field appearance="outline">
    <mat-label>Your name</mat-label>
    <input matInput placeholder="Jane Doe">
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>Your email</mat-label>
    <input matInput placeholder="[email protected]">
  </mat-form-field>

</div>

Forme résultante:

enter image description here

Avec la taille de police du conteneur: 18px;

<div style="font-size: 18px">

  <mat-form-field...

</div>

Forme résultante:

enter image description here

NB

Ce n'est pas une solution pour vous si vous n'êtes pas satisfait du rembourrage par défaut des formes matérielles. Cependant, c'est une question différente de la façon dont vous redimensionnez simplement les formulaires. Le redimensionnement est simple, la modification du rembourrage, etc. est plus velue!

8
Peter Nixey

Au cas où quelqu'un voudrait faire de la réponse d'Akber Iqbal une classe (pour avoir les deux tailles disponibles):

:Host ::ng-deep {
  .my-custom-component-small { // add my-custom-component-small class to your mat-form-field element
    .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%;
    }
  }
}

Espérons que l'équipe Angular ajoute la prise en charge de l'interface utilisateur haute densité dans les versions futures (la haute densité fait partie de spécifications de conception des matériaux ).

1
Wildhammer

Voici une solution récente pour un champ de 32 pixels de haut et permettant des coins arrondis.

  & .mat-form-field-wrapper {
    height: 44.85px;

    & .mat-form-field-flex {
      height: 32px;

      & .mat-form-field-outline {
        $borderRadius: 25px;
        height: 28px;

        & .mat-form-field-outline-start {
          border-radius: $borderRadius 0 0 $borderRadius;
          width: 13px !important; // Override Material in-line style
        }

        & .mat-form-field-outline-end {
          border-radius: 0 $borderRadius $borderRadius 0;
        }
      }

      & .mat-form-field-infix {
        left: 4px;
        padding: 0;
        top: -7px;

        & .mat-form-field-label,
        & .mat-input-element {
          font-size: 12px;
        }

        & .mat-form-field-label-wrapper {
          top: -1.04375em;

          & .mat-form-field-label {
            height: 16px;
          }
        }
      }
    }
  }
0
Russ