Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Custom Fields and Error Indicator Position
Hello,
I have followed:
https://vaadin.com/docs/-/part/framework/components/components-customfield.html
And created a custom component including a text field inside of this, contained in a CssLayout:
root = new CssLayout();
root.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
root.addComponent(innerField);
root.addComponent(okButton);
root.addComponent(cancelButton);
Now I add this into a Form layout and attach a binder and a validator to the innerField.
Of course, the Error indicator is now contained within the CssLayout, and when the validation state of the component changes, the text field ju,ps to the right to make space for the error indicator.
Is there a way to assemble the components or add CSS to make the error indicator to line up with the error indicators of other normal text fields in the form layout and top it from moving ?
I attached two screensots to who what I mean.
My suspicion is that there is no easy way, but that one could try to add the indicator to the layout somehow. But I got no idea how to proceed at the moment.
Any suggestion would be very welcome.
Thanks.
Dominic
Ok I figured it out. Intercept the event, set the style of the inner field manually and add a component error to the outside component:
binder.setValidationStatusHandler(event -> {
if (event.isOk()) {
setComponentError(null);
innerField.removeStyleName("v-textfield-error");
} else {
innerField.addStyleName("v-textfield-error");
if (!event.getFieldValidationErrors().isEmpty()) {
Optional<String> message = event.getFieldValidationErrors().get(0).getMessage();
setComponentError(new UserError(message.orElse("Invalid content")));
} else {
setComponentError(new UserError("Invalid content"));
}
}
});