cssvaadinvaadin-flowvaadin23vaadin24

How to properly use FormLayout and FlexLayout in Vaadin24


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?


Solution

  • 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.