4

I am trying to set up a FormLayout using Vaadin 14 and no matter what I try, the labels appear below the form fields. I would like them to appear to the left of the fields, but even getting them to appear above the fields would be a step in the right direction.

I believe I am supposed to be able to set the position of the labels when I set up the layout's responsive steps. I set up the responsive steps using the following code:

layout.setResponsiveSteps(new ResponsiveStep("0", 1, LabelsPosition.ASIDE), new ResponsiveStep("600px", 2, LabelsPosition.ASIDE), new ResponsiveStep("900px", 3, LabelsPosition.ASIDE));

The layout behaves as expected when the window is resized, but the labels still appear below the fields. I have tried replacing LabelsPosition.ASIDE with LabelsPosition.TOP, but this changes nothing. It is also worth mentioning that I am adding the fields using FormLayout's addFormItem() method and that I am not using setLabel() to add labels to the fields beforehand.

I'm not sure if this is helpful, but I noticed something when comparing my HTML to the HTML from the examples. I see that #shadow-root is a child of the vaadin-form-item in the examples, while in my case it's a child of the vaadin-text-field.

Does anyone have any ideas on how to fix this issue?

Edit: Here is a simplified version of my code which has the same issue:

FormLayout form = new FormLayout();
form.setWidthFull();
form.setResponsiveSteps(new ResponsiveStep("0", 1, LabelsPosition.ASIDE),
        new ResponsiveStep("600px", 2, LabelsPosition.ASIDE),
        new ResponsiveStep("900px", 3, LabelsPosition.ASIDE));

TextField field0 = new TextField();
field0.setWidthFull();
form.addFormItem(field0, "Field 0");

TextField field1 = new TextField();
field1.setWidthFull();
form.addFormItem(field1, "Field 1");

TextField field2 = new TextField();
field2.setWidthFull();
form.addFormItem(field2, "Field 2");

content.add(form);
Evan
  • 175
  • 7
  • 1
    addFormItem on the FormLayout should work. Checkout the examples https://vaadin.com/components/vaadin-form-layout/java-examples To better help you can you show some code please? – Simon Martinelli Jul 06 '21 at 12:48
  • 2
    I tried your code example and it looks ok to me (on all different screen widths), none of the labels are below the fields. Screenshot: https://imgur.com/a/PW5vRaN – ollitietavainen Jul 07 '21 at 05:31

1 Answers1

1

I figured out what was causing my issue. In my project, I have disabled classpath scanning and I am manually instantiating and invoking the initializers used by Vaadin. I forgot to add FormItem.class as a parameter for the DevModeInitializer, so the FormItems were not displaying correctly. Now that I have added this parameter, the labels are appearing in the correct position.

Evan
  • 175
  • 7