How to add Component ranged right to Navbar in AppLayout?

Question

My MainView extends of an AppLayout. I want to fill the Navbar with a logo on the left side of it and the user id on the right side of the Navbar. Unfortunately everything I tried ends with both Components bound to the left side.

Navbar goal:

| Image -------------------------------------------------------------------------------------------------------- UserID |

Example code (same outcome with Vaadin 14 Image and a String):

public class MainView extends AppLayout
...

private void setupNavigationBar() {
    Div a = new Div();
    a.setText("Foo");
    a.getStyle().set("flex-flow", "flex-start");

    Div b = new Div();
    b.setText("Bar");
    b.getStyle().set("flex-flow", "flex-end");
    addToNavbar(a, b);
}

Navbar outcome:

| FooBar ------------------------------------------------------------------------------------------------------------------ |

What is the issue here? Why does the flex-flow not work? I already tried to wrap it in a HorizontalLayout which also does not work.

score 4 · Accepted Answer · answered Oct 16 '19 at 14:42

I have found a similar case here How to align flexbox columns left and right?and solution seems to work for me like you describe:


@Route("custom-appLayout")
public class CustomAppLayout extends AppLayout {
    public CustomAppLayout(){
            Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
            img.setHeight("44px");
            addToNavbar(new DrawerToggle(), img);
            Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
            tabs.setOrientation(Tabs.Orientation.VERTICAL);
            addToDrawer(tabs);
            addToNavbar(img);

            Div b = new Div();
            b.setText("Bar");
            b.getStyle().set("margin-left", "auto");
            b.getStyle().set("padding", "15px");
            addToNavbar(b);
    }
}

I've added a padding, since otherwise Bar is too close to the end, but you could set any value you want there. And this is how it looks like:

Links I've used:

A Complete Guide to Flexbox This is my favorite article about flexbox . I'm pretty much always looking for it, when want to check something : )
AppLayout official docs. A stub snippet code is taken from there

Thanks a lot for the clarification and your time! I miss used the flex-flow I guess. — Michael Kemmerzell, Oct 17 '19 at 05:22

How to add Component ranged right to Navbar in AppLayout?

1 Answers1