【问题标题】：Why does the button protrude from the layout in Vaadin Flow 14?为什么按钮会从 Vaadin Flow 14 的布局中突出？
【发布时间】：2020-06-15 19:42:24
【问题描述】：

所以我有一个

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)

【问题讨论】：

我的猜测是围绕这样一个事实，即布局与元素之间的间距和/或框大小混淆。如果您真的只想将按钮向右移动，您也可以按屏幕顺序添加它们，然后在 cancelButton 上添加 margin-left: auto。
我确认了您的问题。如果不设置相反的方向，按钮将包含在布局中，正如预期的那样。添加相反的方向，“保存”按钮挂在右侧的布局外，作为您的报告。

标签： java layout flexbox vaadin vaadin14

【解决方案1】：

显然是一个错误

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

我在布局中添加了一个彩色虚线边框以显示正在发生的事情。请参阅我的 this Answer 为 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 Technology Preview 版本 Release 101（Safari 13.2、WebKit 14610.1.3.1）和 Firefox Developer Edition 74.0b9（64 位）中的结果类似。

解决方法

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

【讨论】：