CODEWITHSUNDEEP
javavaadinvaadin6
jhamon
jhamon

Reputation: 3691

FormLayout: 1 caption for 2 fields

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):

enter image description here

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.

Upvotes: 1

Views: 268

Answers (3)

jhamon
jhamon

Reputation: 3691

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;
}

Upvotes: 0

Vikas Suryawanshi
Vikas Suryawanshi

Reputation: 522

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");

Upvotes: 0

Tatu Lund
Tatu Lund

Reputation: 10623

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.

Upvotes: 2

Related Questions