User1291 :

So I have a

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

This results in a layout that is too short to contain the buttons,

which in turn leads to an unwanted horizontal scrollbar when I expand the layout to full width.

How do I keep the buttons within the layout?

UPDATE

This is with

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)

Basil Bourque :

Apparently a bug

I tried your code, and verified the issue. Seems to be a bug. So I opened an issue ticket, # 7738.

I added a colored dotted border to the layout to show what is happening. See this Answer of mine for adding a border to a layout in Vaadin Flow.

Here is a complete example app.

By the way, I suspect you can skip your call to getElement. The HorizontalLayout class offers a getStyle method itself, which apparently is a convenience method that accomplishes the same end. Your issue appears with and without calling 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;
    }
}

And a screenshot. Running Vaadin 14.1.18, Java 13, macOS Mojave, using Jetty server within IntelliJ 2019.3.3. Client is Microsoft Edge, version 80.0.361.62. Similar result in Safari Technology Preview version Release 101 (Safari 13.2, WebKit 14610.1.3.1), and in Firefox Developer Edition 74.0b9 (64-bit).

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

Apparently a bug

Guess you like