Problem laying out my UI

Hi all,

I am desperately trying to manage the layout of my UI.

Quite simple: it should contain a menubar of about 30-50 px in height, the rest of the area will be populated with a navigator to jump back and forth between views.
No matter what I try, I somehow always end up with the lower area overlapping my menu, or the navarea only contains the lower 50% of the browser space, working with an AbsoluteLayout does not even render both of my components. Can anyone help?


class MyUI extends UI {

Navigator navigator
private String loggedInUser
private MainView mainView 

public MyUI() {

protected void init(VaadinRequest vaadinRequest) {

            MenuBar menu = new MenuBar()

	MenuBar.MenuItem customer =	menu.addItem("Kundendaten", null, null)
	MenuBar.MenuItem orders = menu.addItem("Auftragsdaten", null, null)

	MenuBar.Command mycommand = new MenuBar.Command() {
		public void menuSelected(MenuItem selectedItem) {

	customer.addItem(CustomerSearchView.NAME, mycommand)

	VerticalLayout content = new VerticalLayout();
	VerticalLayout navArea = new VerticalLayout();

	ComponentContainerViewDisplay vDisplay = new ComponentContainerViewDisplay(navArea)


	navigator = new Navigator(this, vDisplay)
	navigator.addView("", new MainView())
	navigator.addView(CustomerSearchView.NAME, CustomerSearchView.class)


Let’s see if I can get this right without actual code…

//add these, e.g. after content.add..
content.setExpandRatio(navArea, 1);
//replace this
navigator = new Navigator(this, navArea); //navigator will wrap this for you

Hi Thomas,

Thanks for your answer.

The items were still overlapping after trying your code. (The view area overlapped with the menubar)

I then remove a custom theme tag (@Theme(“mytheme”).

The only thing in the css file is:
@import url(…/reindeer/styles.css);

.v-menubar { position:absolute; top:0px; left:0px; width: 100%; margin: 5px;

Why does this make things overlap? It actually ruined everything… an absoluteLayout or CssLayout or VerticalLayout… no matter what I tried, it always resulted in funny problems. Is there anything missing in my CSS? I would assume my theme only changs the menubar positioning and the margin to other elements?

Thank you

You don’t need CSS for this at all. Your position:absolute messes thing up.