Vaadin 13beta1中的CustomField顶部似乎有很大的额外空间

我使用Vaadin 13 beta1预发布创建了一个表单中使用的customfield。但是，它在字段顶部创建了一个巨大的空白（请参见下面我的绿色标记，忽略红色和黄色背景色，因为它们只是为了让我了解正在发生的事情。）

我怎样才能解决这个问题？我试图手动设置minHeight、maxHeight和height值，但没有改变……这是我的customfield代码。（formlayout的代码相当标准，因此未包含在此处。）

---

这个问题来自CSS

内联内容的默认垂直对齐方式是

基线

，核心Vaadin布局（包括表单布局）也使用该对齐方式。基线对齐的工作原理是，元素内的第一行文本用于对齐该元素

---

对于Vaadin字段组件，这将是标签文本。但是，由于我们希望根据field input元素对齐字段，使其与同一行上的文本、按钮、复选框等对齐（即使字段有标签和/或错误消息），因此我们有一些额外的CSS来移动字段元素中的基线。显然，自定义字段中缺少此修复程序。

您对所有这些字段使用的是哪种布局？我的假设是这是一个基线对齐问题（自定义字段的标签与右侧复选框的标签对齐）。这意味着CustomField没有正确处理基线对齐（所以这是一个bug）。@Jouni我使用的只是一个普通的“formlayout”。但是，根据您的评论，我删除了复选框和除简单的“textFields”之外的所有其他字段。我甚至注释掉了“ResponsiveStep（）”语句。您可以在上面我编辑的原始帖子中看到生成的屏幕截图和源代码片段。（问题依然存在。）你有什么想法？（仅供参考：如果我将CustomField粘贴到一个水平布局中，到目前为止，一切似乎都很正常……）是的，因此它看起来确实像一个基线对齐问题。作为一种解决方法，您可以将所有字段的对齐设置为

flex start

（即顶部）。开发团队已经发现了这个问题：

package com.deepsearch.fe.util;

import com.vaadin.flow.component.customfield.CustomField;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.textfield.TextField;

public class TextRangeFieldInt extends CustomField<StartToEndRangeInt> {
    private final TextField start = new TextField();
    private final Label lblTo = new Label("to");
    private final TextField end = new TextField();

    public TextRangeFieldInt(final StartToEndRangeInt startToEndRangeInt, final String startEndWidths) {
        this.setHeight("10px");
        this.setMinHeight("10px");
        this.setMaxHeight("10px");
        this.getElement().getStyle().set("background-color", "red");
        //this.getStyle().set("background-color", "red");
        setPresentationValue(startToEndRangeInt);
        final HorizontalLayout hl = new HorizontalLayout();
        hl.setWidth("100%");
        hl.getStyle().set("background-color", "yellow");
        hl.setMargin(false);
        hl.setPadding(false);
        hl.setAlignItems(FlexComponent.Alignment.CENTER);

        lblTo.setWidth("1.5rem");
        start.setWidth(startEndWidths);
        end.setWidth(startEndWidths);
        hl.add(start);
        hl.add(lblTo);
        hl.add(end);
        add(hl);
    }

    @Override
    protected StartToEndRangeInt generateModelValue() {
        return new StartToEndRangeInt(Integer.parseInt(start.getValue()), Integer.parseInt(end.getValue()));
    }

    @Override
    protected void setPresentationValue(StartToEndRangeInt newPresentationValue) {
        start.setValue(newPresentationValue.getStartStr());
        end.setValue(newPresentationValue.getEndStr());
    }
}

        final FormLayout nameLayout = new FormLayout();
//        nameLayout.setResponsiveSteps(
//   //             new FormLayout.ResponsiveStep("0", 1),
////                new FormLayout.ResponsiveStep("21em", 2),
//                new FormLayout.ResponsiveStep("0em", 3));
       // nameLayout.add(uniqueExpName, sampleComplexity, gradientLength, numTechRepl, minMz, maxMz, enableVariableDiaWindow, densestMz, vlSampleCondit, useSettingsNextTime);
     //   nameLayout.add(uniqueExpName, sampleComplexity, gradientLength, numTechRepl, mzRange, enableVariableDiaWindow, densestMz, vlSampleCondit, useSettingsNextTime);
   //     nameLayout.add(uniqueExpName, sampleComplexity, gradientLength, numTechRepl, mzRange, enableVariableDiaWindow, densestMz, lblSampleAndConditionNumber, sampleAndCondNum);
        nameLayout.add(uniqueExpName, gradientLength, numTechRepl, mzRange, densestMz);
        nameLayout.setWidth("55rem");
        add(nameLayout);
        setAlignSelf(Alignment.CENTER, nameLayout);