Labels are not aligned when CustomField is added to FormLayout

CustomField is not handling “labels” properly. Please see the code given below and its output (see attachment).

import com.vaadin.flow.component.customfield.CustomField;
import com.vaadin.flow.component.formlayout.FormLayout;
import com.vaadin.flow.component.textfield.TextField;

public class FormWithCustomField extends FormLayout {

    public FormWithCustomField() {
        add(new TextField("Text"));
        add(new CustomTextField("Custom Text"));
    }

    private static class CustomTextField extends CustomField<String> {

        private TextField internal = new TextField();

        private CustomTextField(String label) {
            add(internal);
            setLabel(label);
        }

        @Override
        protected String generateModelValue() {
            return internal.getValue();
        }

        @Override
        protected void setPresentationValue(String value) {
            internal.setValue(value);
        }
    }
}

17537628.png

Hi,

you should create a ticket at https://github.com/vaadin/vaadin-form-layout-flow/issues , with some additional information on how you’re creating the form. That’s either a missing functionality or a bug.

-Olli

Hi, I remember this being asked on StackOverflow a week ago: https://stackoverflow.com/q/54791425/3441504
Apparently, some CSS was added lately to fix a bug with the baseline alignment of many input components, but the CustomField was forgotten in that fix. There already exists an issue [here]
(https://github.com/vaadin/vaadin-custom-field/issues/23) and it looks like it is going to be fixed in the next release.

@Olli
Thank you for the response.
@Kaspar
I think that is the issue and already a ticket is there.