Vaadin 14 FormLayout 标签位置错误

Question

我正在尝试使用 Vaadin 14 设置 FormLayout，无论我尝试什么，标签都显示在表单字段下方。我希望它们出现在字段的左侧，但即使让它们出现在字段上方也是朝着正确方向迈出的一步。

我相信我应该能够在设置布局的响应步骤时设置标签的位置。我使用以下代码设置响应步骤：

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

调整 window 大小时，布局的行为符合预期，但标签仍显示在字段下方。我尝试用 LabelsPosition.TOP 替换 LabelsPosition.ASIDE，但这没有任何改变。还值得一提的是，我正在使用 FormLayout 的 addFormItem() 方法添加字段，并且我没有使用 setLabel() 预先向字段添加标签。

我不确定这是否有帮助，但在将我的 HTML 与 examples 的 HTML 进行比较时，我注意到了一些事情。我在示例中看到 #shadow-root 是 vaadin-form-item 的子项，而在我的例子中它是 vaadin-text-field.

的子项

有人知道如何解决这个问题吗？

编辑：这是我的代码的简化版本，它有同样的问题：

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

Answer 1

我知道是什么导致了我的问题。在我的项目中，我禁用了类路径扫描，并手动实例化和调用 Vaadin 使用的初始化程序。我忘记添加 FormItem.class 作为 DevModeInitializer 的参数，因此 FormItems 无法正确显示。现在我已经添加了这个参数，标签出现在正确的位置。

Vaadin 14 FormLayout 标签位置错误

Vaadin 14 FormLayout Labels are in the wrong position

vaadin

vaadin-flow

vaadin14