FormLayout: 1 caption for 2 fields

Question

I have a view containing a FormLayout.

I want this layout to contains 2 columns: one with the captions, and the 2nd one with the input fields. My fields are all marked as required so all captions display the small red indicator on there right side (and no indicator on the input fields).

My issue is that one of my input is a date and a time. I have to display those 2 fields on a single line, with a single caption.

I can easily set the 2 components side by side with a caption by putting both in an HorizontalLayout and setting the caption on the layout. But this set the required indicator not on the caption but on each input fields.

FormLayout form = new FormLayout();
HorizontalLayout blocDateTime = new HorizontalLayout();

PopupDateField dateField = new PopupDateField();
TextField timeField =  new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
blocDateTime.addComponent(dateField);
blocDateTime.addComponent(timeField);
blocDateTime.setCaption("caption.dateTime");

form.addComponent(blocDateTime);

Here is a picture of what I get (A), versus what I want (B):

I could get what I want by setting a custom validator on those field, checking if their value is empty and setting a style on the caption but I wonder if there is a more "standard" way to do that.

Answer 1

Note: If you can upgrade Vaadin to v7+, use Tatu Lund answer.

I solved my problem by setting a custom style to my inner layout to show the indicator on my caption and to hide all required indicators in the form contentcell.

FormLayout form = new FormLayout();
HorizontalLayout blocDateTime = new HorizontalLayout();

PopupDateField dateField = new PopupDateField();
TextField timeField =  new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
blocDateTime.addComponent(dateField);
blocDateTime.addComponent(timeField);
blocDateTime.setCaption("caption.dateTime");
blocDateTime.addStyleName("customrequired");

form.addComponent(blocDateTime);

css:

.v-formlayout-captioncell .v-caption-customrequired:after {
  content: "*";
  padding-left: 2px;
  color: red;
}
.v-formlayout-contentcell .v-required-field-indicator {
  display: none;
}

Answer 2

Since you want only one required indicator (the red asterix), that dictates that you want to have only one field per line.

That means that you should create a CustomField that combines the PopupDateField and TextField into one.

Answer 3

You can create the one object of span type of component and add your date field and time field into span object and then add than span object into form layout object.. Your code will look like as:

FormLayout bloc = new FormLayout();

Span dateTimeBox = new Span();
PopupDateField dateField = new PopupDateField();
TextField timeField =  new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
dateTimeBox.addComponent(dateField);
dateTimeBox.addComponent(timeField);
blocDateTime.add(dateTimeBox);
blocDateTime.setCaption("caption.dateTime");