0

Hola estimada comunidad , tengo un problema para cambiar la altura del componente mat-form-field de angular material 15.1. Estoy desarrollando un proyecto y tengo este html

<div class="dashboard-search-toolbar">
        <form class="dashboard-search-form">
            <mat-form-field class="dashboard-search-field" appearance="fill">
                <mat-label>Buscar servicios</mat-label>
                <input matInput aria-label="Buscar servicios" [formControl]="menuCtrl">
                <mat-icon color="accent" matSuffix>search</mat-icon>
            </mat-form-field>
            <br>
        </form>
    </div>

Y necesito ajustar el tamaño de la altura del mat-form-field a un valor de 50px; para esto he aplicado la siguiente regla CSS

mat-form-field{
  height: 50px;
}

Sin embargo tengo este resultado:

resultado de aplicar regla css

Y al intentar escribir en el input, el componente se comporta de esta manera:

comportamiento del elemento input.

¿Cuá es la manera correcta de realizar esa modificación de este componente?. Se lo agradezco de antemano.

1
  • Puedes intentar ::ng-deep .mat-form-field-infix { height: 50px; } el 29 may. a las 15:49

2 respuestas 2

0

Debería de funcionar:

mat-form-field {
   height: 50px !important;
}
2
  • He intentando con tu solución, sin embargo la distorción se mantiene. He probado algunas soluciones por el estilo, incluso con el :host ::ng-deep, aunque según la documentación está obsoleto, y de igual manera no funciona el 9 may. a las 20:21
  • Probaste quítandole la clase al mat-form-field?
    – René
    el 10 may. a las 0:14
0

Custom style for outline appearance:

    .mat-sm > .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex {
       height: 35px !important;
    }
    .mat-sm > .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form- 
    field-infix  {
      padding-top: 8px !important;
    }
   .mat-sm >  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc- 
    floating-label {
      top: 17px;
    }
    .mat-sm >  .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mdc-floating- 
    label--float-above {
      top: 28px;
    }

HTML:

    <mat-form-field appearance="outline" class="font-weight-bold mat-sm w-30 mt-2" 
    color="accent">

introducir la descripción de la imagen aquí

1
  • 1
    Hola Guaru, estás en SOes, el idioma soportado es el español, las respuestas que son solo código, son consideradas de baja calidad, te sugiero que edites tu respuesta, y la adaptes a los requerimientos del sitio, de esa forma será mejor recibida y evitarás recibir votos negativos. ver como responder aprovecha y haz el recorrido de Bienvenida para entender mejor cómo funcionamos y de paso obtener una medalla!. el 21 jul. a las 11:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.