What is the best option of layout component to build a multi-column form?

I’m trying to create a form with 6 columns and 3 lines, but it is really difficult to use both VerticalLayout and HorizontalLayout. When I try to set fixed widths to my fields it overlap others fields in the same row. I want to remove the margin between lines because I need just some space between lines in the top and bottom, but no in left and right side: how can I do that?

I saw some topis about others layout elements available in the Vaadin Directory like ColumnLayout, WeeLayout, etc. Some of the topics about it are really old, so I’m not sure if it is still good alternatives.

Have you tried the GridLayout which is builtin in the framework?

Hi Tatu, I’ve tried VerticalLayout, HorizontalLayout and GridLayout as well. But I found the CustomLayout as a better solution to this case. Could you please tell me if it is the best option when I need to create complex forms in Vaadin?

I would like to challenge your premises a bit - are you sure a multi-column layout is the best choice for a complex form? Usually the recommended way would be to split those up and use e.g. a paged or wizard-style approach instead of having a huge form on one page.


Hi Olli, thanks for asking… I have to migrate an application created in Java Applet to Vaadin, but one of the main requirements is that I should keep the same structure (fields disposal) as much as possible. In this special case, I have a form with two lines each of them with 8 fields where some of them should be grouped in pairs (checkboxes and inputs). The quikly and easiest solution that I found to execute it was to use the HTML approach, because the others layouts available are a little bit hard to manage (even using CSS).