AppLayout Navbar Question

Flow
1

Hi,

Trying to center content in an AppLayout navbar I have tried without success.

How can I center the navbar content?

Paul Fraser

        HorizontalLayout navbarLayout = new HorizontalLayout();
        navbarLayout.setWidthFull();
        Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
        img.setHeight("44px");
        navbarLayout.add(img);
        navbarLayout.setAlignItems(FlexComponent.Alignment.CENTER);
        addToNavbar(navbarLayout);
2

Hi,

For the benefit of those who have not quite got the flex thing yet, the problem with my code is that the main axis of a horizontal layout is horizontal, so the alignment is a justify action, not an align action.

Works well.

Jean-Christophe Gueriaud in another thread of mine pointed me to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ which is an excellent reference for flex.

Paul

		HorizontalLayout navbarLayout = new HorizontalLayout();
        navbarLayout.setWidthFull();
        Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
        img.setHeight("44px");
        navbarLayout.add(img);
        navbarLayout.setJustifyContentMode(FlexComponent.JustifyContentMode.CENTER);
        addToNavbar(navbarLayout);