angular / angular/components

Form field Floating labels gaps not customizable and not taking into account the label actual size

Abierto
#16,411 16 comentarios 15 reacciones 0 asignados Ver en GitHub
area: material/form-field feature P5
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

#### Feature Description
So here is the thing. Since no dense mode and since we have a custom looking material inputs, I had to make my own customization on the scss theme of the form field. The problem appeared when I changed the font size and the font itself of the floating label. Suddenly I saw that the borders are overlapping the text.
```
const floatingLabelScale = 0.75;
const outlineGapPadding = 5;
```
these values are based on some assumption that the label size will never be customized.
Now, in order to override this behavior I had to create my own directive that changes the values
and recalculate the gaps.
So I would like to request a change of this logic to calculate gaps dynamically, or to expose these 2 numbers as inputs or something that can be changed from outside. I'm ok with an injection token as well.

#### Use Case

In order to allow more customization features and be able to change the font-size of the floating label.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza localizando la implementación de Angular Material form-field que define el escalado de las etiquetas flotantes y los valores de las separaciones del contorno, y luego reproduce el problema con una fuente y un tamaño de etiqueta personalizados. Determina si las separaciones deben calcularse dinámicamente o exponerse para su configuración; se considerará terminado cuando las etiquetas personalizadas ya no se superpongan a los bordes.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, scss, typescript
Área
frontend
Tipo de issue
Nueva funcionalidad
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.