Custom Fields and Error Indicator Position

Vaadin 6 / 7 / 8 Framework UI
1

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

32105.jpg
32106.jpg

2

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"));
                }
            }
        });