Выровняйте виджеты вдоль базовой линии поля в Vaadin Flow 12

Я пытаюсь вертикальное выравнивание в HorizontalLayout в Ваадине 12.

В большинстве приложений, которые я могу себе представить, имеет смысл расположить виджеты вдоль базовой линии текстовых полей, поскольку текстовые поля, как правило, определяют структуру большинства приложений, в частности бизнес-приложений.

Так что я был рад найти FlexComponent.Alignment.BASELINE предлагается для HorizontalLayout, Но когда я попробовал это в приложении Vaadin 12.0.2, базовая линия, кажется, все, кроме текстового поля.

Вот пример приложения. Я скачал сгенерированный базовый стартер и не трогал ничего, кроме содержимого MainView конструктор.

Приложение состоит из VerticalLayout состоит из шести HorizontalLayout объекты. Каждая горизонтальная полоса является Label, TextField, Button, а также Button, Ярлык и первая кнопка имеют вертикальное выравнивание, установленное явно.

Используйте край другого окна поверх окна, которое вы сейчас просматриваете, используя его верхний край, как линейку. Обратите внимание, как выглядит строка "BASELINE", чтобы выровнять явно установленные виджеты (метка и первая кнопка) с базовой линией заголовка поля, а не самого поля, и с базовой линией текста последней кнопки.

Итак BASELINE выравнивание выравнивает базовую линию всего, кроме текстового поля. Это прямо противоположно тому, что я ожидаю и нуждаюсь.

Feature Это особенность или ошибка?

Doing Я делаю что-то не так?

➥ Есть ли способ заставить виджеты выровняться по базовой линии TextField?

Как второстепенная проблема, STRETCH кажется, не имеет никакого эффекта. Что это должно делать?

Код 

package work.basil.example.bugsy;

import com.vaadin.flow.component.button.Button;
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.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin Flow",
    shortName = "Project Base" )
public class MainView extends VerticalLayout {

    public MainView () {
        this.setSpacing( true );
        this.setMargin( true );

        for ( FlexComponent.Alignment a : FlexComponent.Alignment.values() ) {
            Label label = new Label( a.name() );
            TextField field = new TextField( "field" );
            Button alignedButton = new Button( "aligned" );
            Button unalignedButton = new Button( "unaligned" );

            HorizontalLayout horizontalLayout = new HorizontalLayout();
            horizontalLayout.add( label , field , alignedButton , unalignedButton );
            // Set vertial alignment of the label and the first button.
            horizontalLayout.setVerticalComponentAlignment( a , label );
            horizontalLayout.setVerticalComponentAlignment( a , alignedButton );

            this.add( horizontalLayout );
        }
    }
}
Источник

2 ответа

Решение

Feature Это особенность или ошибка?

Это ошибка.

Doing Я делаю что-то не так?

Не думай так. Я создам проект Flow, чтобы проверить это.

➥ Есть ли способ заставить виджеты выровняться по базовой линии TextField?

Не уверен, есть ли разница, что вы, кажется, устанавливаете выравнивание для компонентов по отдельности по сравнению с настройкой "глобально" для всего макета (align-self против align-items в CSS).

Как незначительный побочный вопрос, STRETCH, похоже, не имеет никакого эффекта. Что это должно делать?

Растяжение должно заставить компонент расти вертикально, чтобы соответствовать самому высокому элементу в ряду.

Вот тестовый пример только для клиентской стороны, который, по крайней мере, работает как положено:

https://conscious-seeker.glitch.me/

https://glitch.com/edit/

Источник

Надпись на поле искажает макет

Проблема в вашем примере заключается в подписи к TextField,

Ответ Джоуни объясняет, что это ошибка.

Временное решение

В качестве обходного пути удалите подпись из вашего TextField виджет.

В вашем примере кода просто измените это:

TextField field = new TextField( "field" );

…к этому:

TextField field = new TextField();

Теперь раскладка разумная, ведёт себя так, как вы ожидали.

Это небольшая досадная ошибка, когда по иронии судьбы наименее важный элемент (заголовок поля) захватывает алгоритм компоновки. Но, по крайней мере, у нас есть обходной путь, пока не появится исправление: избегайте использования надписей на полях.

Источник
Другие вопросы по тегам