Mix of FormLayout and HorizontalLayout

I’m using the FormLayout inside a Panel. This makes all captions be aligned in the left of my fields. Now, for a specific line of the form, I want to align two or more fields horizontally. For that I’m using the HorizontalLayout. The problem is that the captions stay in top of the text and not in the left anymore.

If I try to wrap each field in a FormLayout, then I solve the caption problem, but the first text field caption isn’t aligned with the other fields of my form. Is there some way to do that?

Probably the easiest solution is to have an empty caption for the first horizontal field, and set it instead as the caption of the HorizontalLayout. You could also use GridLayout, and handle the captions as Labels, but there’s a lot more effort in that.

You could also use a CssLayout with “display: inline-block” instead of the HorizontalLayout + FormLayout. Well, the CssLayout way may create some wrapping problems if there’s not enough horizontal space.

Thanks Marko. Since I created a subclass of Panel to control the content of the form panel, it was really easy to do your first suggestion.

could you please post your solution - I have the same problem right now and try the suggested solution. But it dowsn’t really work when using validation.