I'm attempting to place 3 items on the left of the screen (text-field, date-picker, and select-dropdown) vertically. Then I would like 3 select dropdowns placed horizontally on the right side of the screen. I got that to work fine. Now I want to add 3 more selects under the first set of selects. Is this possible using Vaadin? Here is what I have..
FormLayout formLayout = new FormLayout();
formLayout.setWidthFull();
// Create a TextField
TextField textField = new TextField("Text Field");
// Create a DatePicker
DatePicker datePicker = new DatePicker("Date Picker");
// Create Select components with labels
Select<String> select1 = new Select<>();
select1.setLabel("Select 1");
Select<String> select2 = new Select<>();
select2.setLabel("Select 2");
Select<String> select3 = new Select<>();
select3.setLabel("Select 3");
// Create three additional Select components with labels
Select<String> select4 = new Select<>();
select4.setLabel("Select 4");
Select<String> select5 = new Select<>();
select5.setLabel("Select 5");
Select<String> select6 = new Select<>();
select6.setLabel("Select 6");
// Create FormItems for components
FormItem textFieldFormItem = formLayout.addFormItem(textField, "Text Field");
FormItem datePickerFormItem = formLayout.addFormItem(datePicker, "Date Picker");
FormItem selectFormItem1 = formLayout.addFormItem(select1, "Select 1");
FormItem selectFormItem2 = formLayout.addFormItem(select2, "Select 2");
FormItem selectFormItem3 = formLayout.addFormItem(select3, "Select 3");
FormItem selectFormItem4 = formLayout.addFormItem(select4, "Select 4");
FormItem selectFormItem5 = formLayout.addFormItem(select5, "Select 5");
FormItem selectFormItem6 = formLayout.addFormItem(select6, "Select 6");
// Create a FlexLayout to hold the first set of Select components
FlexLayout firstSelectLayout = new FlexLayout();
firstSelectLayout.add(selectFormItem1, selectFormItem2, selectFormItem3);
firstSelectLayout.setFlexDirection(FlexLayout.FlexDirection.ROW);
firstSelectLayout.setAlignItems(FlexLayout.Alignment.BASELINE);
// Create a FlexLayout to hold the second set of Select components
FlexLayout secondSelectLayout = new FlexLayout();
secondSelectLayout.add(selectFormItem4, selectFormItem5, selectFormItem6);
secondSelectLayout.setFlexDirection(FlexLayout.FlexDirection.ROW);
secondSelectLayout.setAlignItems(FlexLayout.Alignment.BASELINE);
// Add all components to the main layout
formLayout.add(textFieldFormItem, datePickerFormItem, firstSelectLayout, secondSelectLayout);
// Add the main layout to the view
add(formLayout);
}
Should I just stick to vertical and horizontal layouts for this?
I can just give a general note here that in Vaadin it is not mandatory to use FormLayout
for all forms. FormLayout
is an opionated layout component designed for doing forms. It is responsive and has certain way of automatically stacking the fields. If the results are not according to your desired design, then you should use some other layouts, it will be easier that trying to alter FormLayout
be something else than it was designed to be. Basically you can use anything that fits your needs.