Почему кнопка выступает из макета в Vaadin Flow 14?

Question

Итак, у меня есть

var layout = new HorizontalLayout();
layout.add(confirmButton);
layout.add(cancelButton);
layout.getElement().getStyle().set("flex-direction", "row-reverse");

Это приводит к тому, что макет слишком короткий, чтобы содержать кнопки

, что, в свою очередь, приводит к нежелательной горизонтальной полосе прокрутки при расширении * От 1006 * до полной ширины.

Как сохранить кнопки в макете?

ОБНОВЛЕНИЕ

Это с

Vaadin 14.1.16
Java 11 (OpenJDK 11.0.6)
on whatever tomcat comes with Spring Boot 2.2.4.RELEASE
in Chrome 80.0.3987.106
on Linux (Ubuntu 19.10 derivate)

Answer 1

Видимо ошибка

Я попробовал ваш код и подтвердил проблему. Кажется, это ошибка. Поэтому я открыл билет на выпуск , # 7738 .

Я добавил цветную пунктирную рамку к макету, чтобы показать, что происходит. См. этот ответ моего о добавлении границы к макету в Vaadin Flow.

Вот полный пример приложения.

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

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;


/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
//@PWA(name = "Project Base for Vaadin", shortName = "Project Base")
@CssImport ( "./styles/shared-styles.css" )
@CssImport ( value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        HorizontalLayout plain = this.makeLayout();

        HorizontalLayout reversed = this.makeLayout();
        reversed.getStyle().set( "flex-direction" , "row-reverse" );

        this.add( plain , reversed );
    }

    private HorizontalLayout makeLayout ( )
    {
        // Widgets
        Button confirmButton = new Button( "Save" );
        Button cancelButton = new Button( "Cancel" );

        // Arrange
        HorizontalLayout layout = new HorizontalLayout();
        layout.add( confirmButton );
        layout.add( cancelButton );

        // Style
        layout.getStyle().set( "border" , "4px dotted DarkOrange" );

        return layout;
    }
}

И скриншот. Запуск Vaadin 14.1.18, Java 13, macOS Mojave, с использованием сервера Jetty в IntelliJ 2019.3.3. Клиент Microsoft Edge, версия 80.0.361.62. Аналогичный результат в версии 101 Safari Technology Preview (Safari 13.2, WebKit 14610.1.3.1) и в Firefox Developer Edition 74.0b9 (64-разрядная версия).

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

Пока что откажитесь от использования Flexbox в обратном порядке. Напишите условный код, который добавляет ваши кнопки в соответствующем порядке.