AppLayout Alignment

Flow
1

Hi

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.
 */
@Tag("vaadin-app-layout")
@HtmlImport("frontend://bower_components/vaadin-app-layout/src/vaadin-app-layout.html")
@NpmPackage(value = "@vaadin/vaadin-app-layout", version = "2.0.2")
@JsModule("@vaadin/vaadin-app-layout/src/vaadin-app-layout.js")
public class AppLayout extends Component implements RouterLayout {
...
}

EDIT: add (original) comment to second snippet

2

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.

3

Guess the second snippet was kind of confusing. It is not mine, it is from
<my-gradle-cache>/com.vaadin/vaadin-app-layout-flow/2.0.2/.../vaadin-app-layout-flow-2.0.2.jar!/com/vaadin/flow/component/applayout/AppLayout.class

… 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 {
   ...
}
4

Maybe try this theme module:

<dom-module id="app-layout-theme" theme-for="vaadin-app-layout">
  <template>
    <style>
      [part="navbar"]
 {
        align-items: center;
        justify-content: center;
      }
    </style>
  </template>
</dom-module>
5

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

6

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

7

In vaadin 14 ( npm mode), you can use @cssimport to import css inside a component. https://vaadin.com/docs/v14/flow/theme/migrate-p2-to-p3.html

8

I solved it like this:

Tabs tabs = new Tabs();
FlexLayout centeredLayout = new FlexLayout();
centeredLayout.setSizeFull();
centeredLayout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
centeredLayout.setAlignItems(FlexComponent.Alignment.CENTER);
centeredLayout.add(tabs);

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

addToNavbar(false, centeredLayout);