Flow FormLayout.ResponsiveStep LabelsPosition.ASIDE

Flow
1

Hi! Just testing the vaadin flow…

It seems there is no difference setting the LabelsPosition.ASIDE to a FormLayout.ResponsiveStep.
The label is always displayed atop the field.

My goal is to show the label on the left and field on the right.

Is it a bug or a misunderstanding?

Thx

2

Hi Jean-Christophe,

I don’t know if this is by design or not, but I could only get the label positioning to work by using FormLayout.addFormItem(Component, Label). For example:

      FormLayout nameLayout = new FormLayout();

      TextField titleField = new TextField();
      TextField firstNameField = new TextField();
      TextField lastNameField = new TextField();

      nameLayout.addFormItem(titleField, "Title");
      nameLayout.addFormItem(firstNameField, "Firstname");
      nameLayout.addFormItem(lastNameField, "Lastname");

Also make sure that the responsive steps are defined correctly.

      nameLayout.setResponsiveSteps(new ResponsiveStep("0", 1, LabelsPosition.TOP),
            new ResponsiveStep("600px", 1, LabelsPosition.ASIDE));
3

OK thank you for precision

4

yes it looks by default on the TOP but if you add the items individually using addItem it puts them left & right.

5

Srinivasa Babu:
yes it looks by default on the TOP but if you add the items individually using addItem it puts them left & right.

That’s just silly. There should be a predictable and reliable way of adding fields to a form and choosing how the labels will appear and behave. I invite someone from Vaadin to elaborate on this and thank them in advance!

6

Javac Aydic:

Srinivasa Babu:
yes it looks by default on the TOP but if you add the items individually using addItem it puts them left & right.

That’s just silly. There should be a predictable and reliable way of adding fields to a form and choosing how the labels will appear and behave. I invite someone from Vaadin to elaborate on this and thank them in advance!

Javac, as far as I can tell the FormLayout is both predictable and reliable. I use many FormLayouts in my app and all of them have the label exactly where I want it, which is aside when on a wider screen and top when on a smaller screen.

7

Martin Israelsen:

Javac Aydic:

Srinivasa Babu:
yes it looks by default on the TOP but if you add the items individually using addItem it puts them left & right.

That’s just silly. There should be a predictable and reliable way of adding fields to a form and choosing how the labels will appear and behave. I invite someone from Vaadin to elaborate on this and thank them in advance!

Javac, as far as I can tell the FormLayout is both predictable and reliable. I use many FormLayouts in my app and all of them have the label exactly where I want it, which is aside when on a wider screen and top when on a smaller screen.

I understand what you are saying. But - why would form fields appear differently depending on whether you do for example something like this:

formLayout.add(firstName, lastName);

// OR

formLayout.addFormItem(firstName, "labelToBeUsed");
// or
formLayout.addFormItem(firstName, firstName);

I tried them all by myself and experienced some weird label outputs. I already started this topic some time ago - I was baffled as to why would a non-existing label still occupy space on the left…
https://vaadin.com/forum/thread/18047769/i-don-t-see-an-addformmethod-which-would-allow-to-add-an-item-completely

8

Javac,

formLayout.AddFormItem creates a FormItem container that separates the label and the component(s). That way, it can re-position the labels according to the responsivesteps.

When you call formLayout.add() its just adding your components and not generating a separate label.

In short, if you want to reposition the labels according to responsivesteps, you should always use FormItem.