In my project, the MainView class is an extension of an AppLayout.
I am attempting to populate the Navbar with a logo on the left and the user ID on the right.
Despite my efforts, both components keep aligning to the left side.
Desired Navbar layout:
| Image -------------------------------------------------------------------------------------------------------- UserID |
Here is an example code snippet (same result using Vaadin 14 Image and a String):
public class MainView extends AppLayout
...
private void setupNavigationBar() {
Div logo = new Div();
logo.setText("Foo");
logo.getStyle().set("flex-flow", "flex-start");
Div userId = new Div();
userId.setText("Bar");
userId.getStyle().set("flex-flow", "flex-end");
addToNavbar(logo, userId);
}
Unexpected Navbar layout:
| FooBar ------------------------------------------------------------------------------------------------------------------ |
What could be the issue here? Why doesn't the flex-flow property function as expected? I even attempted wrapping it in a HorizontalLayout, but that also did not provide the desired outcome.