AppLayout Alignment


I just successfully migrated Vaadin from version 13 to version 14. Everything works fine so far but the new AppLayout menu is not centered anymore.

=> I’m looking for the Java way of doing, to center the horizontal AppLayout the same as the former AbstractAppRouterLayout was aligned.

public class AppRouterLayout extends AppLayout {

    public AppRouterLayout() {
        Tabs tabs = new Tabs();

        Tab tib = new Tab(new RouterLink("Tib", Tib.class));
        Tab tab = new Tab(new RouterLink("Tab", Tab.class));
        Tab tub = new Tab(new RouterLink("Tub", Tub.class));

        tabs.add(tib, tab, tub);
        addToNavbar(false, tabs);
 * Server-side component for the {@code <vaadin-app-layout>} element.
 * Provides a quick and easy way to get a common application layout.
@NpmPackage(value = "@vaadin/vaadin-app-layout", version = "2.0.2")
public class AppLayout extends Component implements RouterLayout {

EDIT: add (original) comment to second snippet

Have you tried using the built-in server-side AppLayout from V14? Based on your code snippet, you’re importing the vaadin-app-layout web component manually.

Guess the second snippet was kind of confusing. It is not mine, it is from

… which - in my eyes - is the server-side AppLayout already. (I only posted it to show the versions etc.)

I’m importing (and extending) the AppLayout in my class AppRouterLayout like:

import com.vaadin.flow.component.applayout.AppLayout;

public class AppRouterLayout extends AppLayout {

Maybe try this theme module:

<dom-module id="app-layout-theme" theme-for="vaadin-app-layout">
        align-items: center;
        justify-content: center;

That’s what I’m looking for, but how can I apply this in Java?

I used to set custom styles from time to time like this:

Upload upload = new Upload(new MemoryBuffer());
upload.getStyle().set("margin-left", "2em");

… but AppLayout has no styles to set

It would be good to have an answer to the last question.

In vaadin 14 ( npm mode), you can use @cssimport to import css inside a component.

I solved it like this:

Tabs tabs = new Tabs();
FlexLayout centeredLayout = new FlexLayout();

tabs.add(new Tab(new RouterLink("Centered Tab", MyView.class));

addToNavbar(false, centeredLayout);