为什么按钮从 Vaadin Flow 14 中的布局突出？

Question

所以我有一个

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

这导致布局太短而无法包含按钮，

当我将 layout 扩展到全宽时，这又会导致不需要的水平滚动条。

如何将按钮保留在布局内？

更新

这是

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

显然是一个错误

我试过你的代码，并验证了问题。似乎是一个错误。所以我开了一个issue ticket, # 7738。

我在布局中添加了彩色虚线边框以显示正在发生的事情。有关在 Vaadin Flow 中向布局添加边框的信息，请参见我的 this Answer。

这是一个完整的示例应用程序。

顺便说一句，我想你可以跳过对 getElement 的呼叫。 HorizontalLayout class 本身提供了一个 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，在 IntelliJ 2019.3.3 中使用 Jetty 服务器。客户端是 Microsoft Edge，版本 80.0.361.62。 Safari Technology Preview 版本 101（Safari 13.2、WebKit 14610.1.3.1）和 Firefox Developer Edition 74.0b9（64 位）中的类似结果。

解决方法

暂时放弃使用 Flexbox 倒序。编写以适当顺序添加按钮的条件代码。

为什么按钮从 Vaadin Flow 14 中的布局突出？

Why does the button protrude from the layout in Vaadin Flow 14?

java

layout

vaadin

flexbox

vaadin14

显然是一个错误

解决方法