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

5

Hello Christian,

I have exactly the opposite problem. I want a 2-column layout with the labels before the field.
Unfortunately, the label always ends up above the field for me.

TextField title = new TextField("Titel");
 DatePicker startDate = new DatePicker("Aktionstart");
 TextField startWeek = new TextField("KW");

formLayout.setAutoResponsive(true);
formLayout.setExpandColumns(true);
formLayout.setExpandFields(true);
formLayout.setLabelsAside(true);
formLayout.setResponsiveSteps(new ResponsiveStep("0", 1, ResponsiveStep.LabelsPosition.ASIDE), new ResponsiveStep("800px", 2, ResponsiveStep.LabelsPosition.ASIDE));

formLayout.addFormRow(new H3("Kampagne"));

title.setReadOnly(true);
binder.forField(title).bind(CampaignUITO::getTitle, CampaignUITO::setTitle);
formLayout.addFormRow(title);

startDate.setRequired(true);
startDate.addValueChangeListener(event -> {
  // .. get week of startdate
});
startWeek.setReadOnly(true);
formLayout.addFormRow(startDate, startWeek);

Do you have any idea what the problem might be here? I only have Vaadin 24.9.12.

6

Sadly yes, the formlayout does not support labels on fields if the formlayout is the one who does the label positioning… meaning instead of adding “KW” to the field, it has to be done as second parameter via addFormRow(field, label)

OT: Good to see you are still using Vaadin :saluting_face:

7

I think @knoobie means addFormItem(field, label)

Here’s the docs section with an example of that: Form Layout component | Vaadin components

1 Like
8

Thanks Rolf! My fingers were faster than my brain…

9

Thank you both. Then I’ll turn 2 columns into 4 ;-).
@knoobie Yes, unfortunately, the environments leave little room for Vaadin, but I’ll do my best to change that.

1 Like