Form has visual problems with error area

Vaadin 6 / 7 / 8 Framework UI
1

Please trust me when I say that this is not a user layout problem. :slight_smile:

I have a Form. Its footer has been set so that it contains a save and a cancel button, but they are pushed all the way to the right.

I’ve noticed that the FormLayout in such a case doesn’t allocate enough space for the error area. That is, when one of the fields’ validators fails, the place where the error message is normally displayed overlaps the bottom-most form field.

I suspect this has something to do with the fact that the footer has one of its components (the save button) have an expandRatio of 1. I’m guessing that this empty space is not taken into consideration by the FormLayout–or more accurately, because it’s empty the form itself is allowed to “bleed” down into it. Then the error message shows up, and the space where it would normally go is now on top of the bottom form label.

My footer layout (for others to try) is like this (excerpted from a function that creates the footer; hence the “returnValue” name :slight_smile: ):


    HorizontalLayout returnValue = new HorizontalLayout();
    returnValue.setSpacing(true);
    returnValue.setWidth("100%");

    final Button saveButton = new Button(/*...*/);    

    returnValue.addComponent(saveButton);
    returnValue.setComponentAlignment(saveButton, Alignment.BOTTOM_RIGHT);
    returnValue.setExpandRatio(saveButton, 1F);

    final Button cancelButton = new Button(/*...*/);
    returnValue.addComponent(cancelButton);
    returnValue.setComponentAlignment(cancelButton, Alignment.BOTTOM_RIGHT);

    myForm.setFooter(returnValue);

I’m using Vaadin 6.4.1.

Best,
Laird