Form Labels are always on ASIDE

Flow
1

I thought the labels are resposive when using addFormItem but something is missing here.

TextField revenueField = new TextField();
TextField expensesField = new TextField();
FormLayout basicItemInfoLayout = new FormLayout();
 basicItemInfoLayout.addFormItem(revenueField, "Revenue");
 basicItemInfoLayout.addFormItem(expensesField, "Expenses");
basicItemInfoLayout.setResponsiveSteps(new FormLayout.ResponsiveStep("0", 1), // 1 column for small screens (top labels)
  new FormLayout.ResponsiveStep("600px", 2)); // 2 columns for larger screens (side labels));

On bigger screens

image
image1188×80 1.5 KB

On small screens
image
I need them ASIDE on larger screens and TOP on smaller screens.Please let me know what am I missing here.

2

You are missing the third parameter in the ResponsiveStep’s constructor called ‘labelsPosition’.

3 
List<FormLayout.ResponsiveStep> responsiveStep = List.of(new FormLayout.ResponsiveStep("0", 1, FormLayout.ResponsiveStep.LabelsPosition.TOP), // 1 column for small screens (top labels)
                new FormLayout.ResponsiveStep("600px", 2, FormLayout.ResponsiveStep.LabelsPosition.ASIDE));
        
        basicItemInfoLayout.setResponsiveSteps(responsiveStep);

This fixed the issue. Also looks like the order is important here. Small screen width should go first and then the next size. If we put the bigger size first in the array, it doesn’t work as expected.

1 Like
4

Yes, that’s also correct :) The order is really important