Problem laying out my UI

Vaadin 6 / 7 / 8
1

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?

@Theme(“ccare”)

class MyUI extends UI {

Navigator navigator
private String loggedInUser
private MainView mainView 

public MyUI() {
	
}

@Override
protected void init(VaadinRequest vaadinRequest) {

            MenuBar menu = new MenuBar()
	menu.setWidth("100%")
	menu.setHeight("100px")

    
	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) {
			navigator.navigateTo(CustomerSearchView.NAME)
		}
	};

	customer.addItem(CustomerSearchView.NAME, mycommand)

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

	ComponentContainerViewDisplay vDisplay = new ComponentContainerViewDisplay(navArea)

	content.addComponent(menu)
	content.addComponent(navArea)
	
	setContent(content)

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

}

2

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

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

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;
background-color:#E0E0E0;
}

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
Thomas

4

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