Question

我创建了一个自定义字段，该字段已通过Vaadin 13 beta1预发行版的形式使用。但是，它在字段顶部创建了一个巨大的空白区域（请参阅下面的绿色标记，而忽略红色和黄色背景色，因为它们只是出于我对所发生情况的理解。）

我该如何解决？我试图手动设置minHeight，maxHeight，height值，但没有任何变化。...这是我的customfield代码。（formlayout的代码是相当标准的，因此此处未包含。）

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

在另一个不同但相关的注解中，我这样做对吗？对于customfield来说，还没有一个很好的例子（因为它仍处于beta中），所以我猜我应该使用水平布局来添加我的各个组件等。

更新＃1

基于下面的@Jouni注释，我试图创建一个更简单的表单布局，其中仅包含几个“简单”字段（例如，所有文本字段，没有任何花哨的复选框）。但是问题仍然存在。请参见下面的屏幕截图以及版式的源代码。（注意：我什至注释掉了版式的“ responseStep”部分，以便仅使用默认/简单方案。）

而且，这是代码段（没什么花哨的）：

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

Answer 1

问题来自CSS。

内联内容的默认垂直对齐方式为baseline，核心Vaadin布局（包括“表单布局”）也使用此对齐方式。基线对齐有效，因此元素内的第一行文本用于对齐该元素。

对于Vaadin字段组件，这将是标签文本。但是，由于我们要根据字段输入元素对齐字段，以使其与同一行上的文本，按钮，复选框等很好地对齐（即使当字段具有标签和/或错误消息时），我们还有一些其他CSS可以在字段元素中移动基线。显然，“自定义字段”中缺少此修补程序。

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

1 个答案: