CODEWITHSUNDEEP
vaadinvaadin-flowvaadin14
Evan
Evan

Reputation: 362

Vaadin 14 FormLayout Labels are in the wrong position

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);

Upvotes: 4

Views: 833

Answers (1)

Evan
Evan

Reputation: 362

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.

Upvotes: 1

Related Questions