Hola a todos,
Las validaciones de campos que hemos establecido con binder para un formulario se muestran debajo de cada campo. El problema es que esto hace que se desplacen hacia abajo los componentes del formulario que se encuentran por debajo. Se produce un movimiento que creo que puede ser extraño para el usuario.
¿Cómo podría evitar este desplazamiento? Estamos usando Vaadin 13.
Gracias!
Hola, el problema es que al mostrar el mensaje de validación el componente se hace más alto que cuando el mensaje de error no está presente, lo que causa el desplazamiento que mencionas.
Una solución posible es definir por CSS un alto mínimo para todos los elementos del formulario, tengan o no un error de validación:
vaadin-form-layout > * {
min-height: 65px;
}
Otra opción es modificar el estilo de cada componente para que mantengan su tamaño según tengan o no un mensaje de error:
<dom-module id="vaadin-text-field-error-message" theme-for="vaadin-text-field">
<template>
<style>
:host(:not([invalid]
)) [part="error-message"]
{
max-height: none !important;
visibility: hidden;
}
</style>
</template>
</dom-module>
Alternativamente, podrías utilizar un binding withStatusLabel lo cual permite mostrar el mensaje de error en otro lugar del formulario, en vez de hacerlo debajo de cada campo:
Span errorLabel = new Span();
errorLabel.getElement().getStyle().set("color", "red");
TextField tf1 = new TextField();
TextField tf2 = new TextField();
Binder<Bean> binder = new Binder<>();
binder.forField(tf1).withConverter(new StringToIntegerConverter("debe ser entero"))
.withStatusLabel(errorLabel).bind(Bean::getValue1, Bean::setValue2);
binder.forField(tf2).withConverter(new StringToIntegerConverter("debe ser entero"))
.withStatusLabel(errorLabel).bind(Bean::getValue2, Bean::setValue2);
add(new VerticalLayout(tf1,tf2, errorLabel));
Saludos
Hola, probaremos tus opciones. Muchas gracias!