如何删除vaadin中标签和文本字段之间的空格

Question

我是 Vaadin (24) 的新手，正在尝试最小化文本字段旁边的标签右侧的空间。当我打开页面并检查标签并删除/取消选中 Chrome 中的宽度元素时，它看起来不错。因此，这告诉我我需要重写这个标签，类似于引导组件。

这就是我在 chrome 中看到的......

  #label {
    width: var(--vaadin-form-item-label-width, 8em);
    flex: 0 0 auto;
   }

这是我的 MainView.java 文件中的内容。

  VerticalLayout verticalLayout = new VerticalLayout();
  FormLayout formLayout = new FormLayout();
  TextField firstNameTF = new TextField();
  formLayout.addFormItem(firstNameTF, "First name");
  firstNameTF.setThemeName("label-padding");
  verticalLayout.add(formLayout);
            

我发现一篇文章将其添加到 CSS 中，但它不起作用。

 :host([theme~="label-padding"]) [part="label"] {
   padding-right: 0px;
   } 

我将上述 css 添加到 styles.css 中，因为该文件适用于其他项目，但不适用于此项目。

然后我创建了 vaadin-text-field-styles.css 并将此注释添加到 MainView 中。

 @CssImport(value = "frontend/themes/my-theme/vaadin-text-field-styles.css", themeFor = "vaadin-    text-field")

当我尝试导入此文件时，找不到它，但它肯定位于 frontend/themes/my-theme 中。我也在前端的根部尝试过。

 @CssImport(value = "./vaadin-text-field-styles.css", themeFor = "vaadin-text-field")

我正在使用 Eclipse。我缺少什么？任何帮助将不胜感激。

Answer 1

当包裹在 FormItem 中时，您的样式无法正常工作，标签不是从 TextField 使用，而是在 FormItem 本身中使用单独的标签。这是为了实现标签位于字段的左侧，因为 TextField 中的内置标签始终位于顶部。此外，FormLayout 与 FormItems 形成一个“网格”，类似于带有字段和标签的布局，即字段对齐等。因此，这里的间隙是故意的。如果您不喜欢间隙，那么您不应该使用 FormItem 换行，也可能使用 FormLayout。

替代方法可能是仅使用

Div

组件来包装

NativeLabel

组件和

TextField

来实现更少约束的设计。