Contact us
Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Calling javascript synchronously by Enver Haase, 2 weeks ago
Recent Posts
Vaadin Forum3. Vaadin 6, 7, 8Framework UI

Custom Fields and Error Indicator Position

Dominic Heutelbeck
5 years ago Apr 07, 2017 12:43pm

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
 

Dominic Heutelbeck
5 years ago Apr 07, 2017 11:24pm

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