java - 为什么按钮会从 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

显然是一个错误

我尝试了您的代码，并验证了问题。似乎是一个错误。所以我开了一张问题单，#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;
    }
}

和截图。使用 IntelliJ 2019.3.3 中的 Jetty 服务器运行 Vaadin 14.1.18、Java 13、macOS Mojave。客户端是 Microsoft Edge，版本 80.0.361.62。Safari 技术预览版 Release 101（Safari 13.2、WebKit 14610.1.3.1）和 Firefox 开发者版 74.0b9（64 位）中的结果类似。

解决方法

现在，放弃使用 Flexbox 逆序。编写条件代码，以适当的顺序添加按钮。