CustomField в Vaadin 13beta1, кажется, имеет большое дополнительное пространство сверху - PullRequest
Новая
       37

CustomField в Vaadin 13beta1, кажется, имеет большое дополнительное пространство сверху

0 голосов
/ 20 февраля 2019

Я создал настраиваемое поле, которое использовалось в форме, используя пререлиз Vaadin 13 beta1.Тем не менее, он создает это гигантское пустое пространство в верхней части поля (см. Мои зеленые отметки ниже и игнорируйте красный и желтый цвета фона, так как они только для моего понимания происходящего.)

enter image description here

Как я могу это исправить?Я попытался вручную установить значения minHeight, maxHeight, height, но ничего не изменилось .... Вот мой код для настраиваемого поля.(Код для 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 еще не было хорошего примера (поскольку он все еще находится в бета-версии), поэтому я догадался, что я должен использовать горизонтальный макет для добавления своих отдельных компонентов и т. Д.

Обновление # 1

Основываясь на комментарии @Jouni ниже, я попытался создать гораздо более простую форму, в которой было всего несколько «простых» полей (например, все текстовые поля, ничего особенного, как флажок).Но проблема осталась.Смотрите скриншот ниже, а также код soure для formlayout.(Примечание: я даже прокомментировал часть responseiveStep формы-макета так, что использовались только стандартные / простые сценарии.)

enter image description here

И,вот фрагмент кода (ничего особенного): 

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

1 Ответ

0 голосов
/ 21 февраля 2019

Проблема связана с CSS.

По умолчанию вертикальное выравнивание для встроенного содержимого - baseline, которое также используется основными макетами Vaadin (включая макет формы).Выравнивание базовой линии работает так, что первая строка текста внутри элемента используется для выравнивания этого элемента.

В случае компонентов поля Vaadin это будет текст метки.Но, поскольку мы хотим выровнять поля на основе элемента ввода поля, чтобы он хорошо совмещался с текстом, кнопками, флажками и т. Д. В одной строке (даже если поле имеет метку и / или сообщение об ошибке), мыиметь некоторый дополнительный CSS для перемещения базовой линии в элементах поля.И, видимо, это исправление отсутствует в пользовательском поле.

...