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

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

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

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

снимок экрана с несколькими полосами ‹code› HorizontalLayout ‹/code›, по одной для каждого значения в перечислении ‹code› FlexComponent.Alignment ‹/code›»></a></p> <p>Вот пример приложения. Я загрузил сгенерированный базовый стартер и не коснулся ничего, кроме содержимого конструктора <code>MainView</code>.</p> <p>Приложение состоит из <code>VerticalLayout</code>, состоящего из шести <code>HorizontalLayout</code> объектов. Каждая горизонтальная полоса представляет собой <code>Label</code>, <code>TextField</code>, <code>Button</code> и <code>Button</code>. Для метки и первой кнопки явно задано вертикальное выравнивание.</p> <p>Используйте край другого окна над окном, которое вы сейчас просматриваете, используя его верхний край как линейку. Обратите внимание, как появляется строка «БАЗОВАЯ ЛИНИЯ», чтобы выровнять явно установленные виджеты (метку и первую кнопку) с базовой линией заголовка поля, а не с самим полем, и с базовой линией текста последней кнопки.</p> <p>Итак, выравнивание <code>BASELINE</code> выравнивает базовую линию всего, <em>кроме</em> текстового поля. Это полная противоположность тому, что я ожидаю и в чем нуждаюсь.</p> <p>➥ Это функция или ошибка?</p> <p>➥ Я что-то не так делаю?</p> <p>➥ Есть ли способ выровнять виджеты по базовой линии <code>TextField</code>?</p> <p>В качестве второстепенной проблемы, <code>STRETCH</code>, похоже, не имеет никакого эффекта. Что он должен делать?</p> <h1>Код</h1> <pre><code>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 (


vertical-alignment alignment vaadin vaadin-flow baseline
person Basil Bourque    schedule 16.12.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

➥ Это функция или ошибка?

Это ошибка.

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

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

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

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

Как второстепенная проблема, STRETCH, похоже, не действует. Что он должен делать?

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

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

https://conscious-seeker.glitch.me

https://glitch.com/edit/#!/conscious-seeker

person Jouni    schedule 17.12.2018
comment
Должен ли я создать отчет об этой проблеме? - person Basil Bourque; 17.12.2018
comment
Да, пожалуйста. - person Jouni; 18.12.2018

arrow_upward
1
arrow_downward

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

Проблема в вашем примере - это заголовок на TextField.

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

Обходной путь

В качестве временного решения удалите заголовок из виджета TextField.

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

TextField field = new TextField( "field" );

…к этому:

TextField field = new TextField();

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

снимок экрана с правильным макетом без подписи на ‹code› TextField ‹/code›

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

person Basil Bourque    schedule 16.12.2018
comment
Этого не должно быть. CSS был тщательно разработан, чтобы выровнять поле ввода с кнопкой, флажками, текстом и т. Д. Метка или сообщение об ошибке не должны влиять на него. Я посмотрю, в чем может быть проблема. - person Jouni; 17.12.2018
comment
По крайней мере, с простым тестовым примером только на стороне клиента все работает: сознательный-seeker.glitch.me (код: glitch.com/edit/#!/conscious-seeker) - person Jouni; 17.12.2018
comment
«Странный выбор поведения» исходит непосредственно из CSS. Первый текстовый элемент внутри блока блока / гибкого контейнера устанавливает базовую линию. Следовательно, это метка компонента TextField. Но мы «исправляем» (действительно хак) это, используя псевдоэлемент «:: before» с пробелом, чтобы установить базовую линию в той же строке, что и содержимое поля ввода. Это также исправляет случай, если у вас нет ярлыка, но есть значок префикса, который также разрушит базовую линию. - person Jouni; 17.12.2018