Multiple layouts in a Form?

I want to add a RichTextArea to a Form for editing a product description. This works fine. However, I would llke this RichTextArea to occupy the full width of the form, with no caption shown to its left. I want to keep the captions for all other fields, but for this RichTextArea, having the caption appearing on its left is just a waste of space.

The FormLayout doesn’t seem to allow a field to span the full width. Hence, I’m looking at using some other layout. But other layouts don’t render the caption to the left of the field in the same nice way.

One way I could think of would be to use a VerticalLayout at the top level in the Form, and then nest a FormLayout inside the VerticalLayout. However, I doubt that Form allows layouts to be nested inside it. Besides, how would I determine which fields go in the outer VerticalLayout and which go in the inner FormLayout, as all the fields seem to be created in one go inside setItemDataSource.

Alternatively, I could leave the RichTextArea outside the form, and add it elsewhere in the window. But then how would do I go about commiting it along with the rest of the Form fields?

-JM

Use VerticalLayout as the Form layout and override the attachField() method in Form to lay the fields out however you like.

See
this example
.