CustomField in Vaadin 13beta1 seems to have big extra space at top - vaadin

Question

I created a customfield that was being used in form using Vaadin 13 beta1 prerelease. However, it creates this giant blank space at the top of the field (see my green markings below, and ignore the red and yellow background colors as they were just for my understanding of what's going on.)
How can I fix this? I tried to manually set the minHeight, maxHeight, height values, but nothing changed....Here's my code for the customfield. (The code for the formlayout is fairly standard and so was not included here.)
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());
}
}
On a different but related note, am I doing this right? There wasn't a good example yet for customfield (since it's still in beta), so I guessed that I am supposed to use a horizontal layout to add my individual components etc.
Update #1
Based on #Jouni comment below, I tried to create a much simpler formlayout which only had a few "simple" fields (eg all text fields, nothing fancy like a checkbox). But the problem remained. See screenshot below as well as the soure code for the formlayout. (Note: I even commented out the "responsiveStep" portion of the formlayout so that only default/simple scenarios were being used.)
And, here's the code snippet (it's nothing fancy):
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

The issue comes from CSS.
The default vertical alignment for inline content is baseline, which is also used by the core Vaadin layouts (including Form Layout). Baseline alignment works so that the first line of text inside an element is used for aligning that element.
In the case of Vaadin field components, that would be the label text. But, since we want to align the fields based on the field input element so that it aligns nicely with text, buttons, checkboxes, etc. on the same line (even when the field has a label and/or an error message), we have some additional CSS to move the baseline in the field elements. And apparently, this fix is missing from Custom Field.