Hello All,
I’m new to Vaadin and i’m strugling with the HorizontalLayout and the setExpandRatio.
I want to create a sidebar similar to the one that is shown in the quicktickets demo. I’m trying to create an Horizontal layout with a menu and a content area. The menu sould have a limited width and the contetn area should expand to use the rest of the available area.
My code so far is:
public class MainUI extends UI
{
private CssLayout root = new CssLayout();
@Override
protected void init(VaadinRequest request) {
root.setSizeFull();
setContent(root);
// Main View:
HorizontalLayout mainView = new HorizontalLayout();
mainView.setSizeFull();
// Menu:
VerticalLayout menu = new VerticalLayout();
Button add = new NativeButton("Add new item");
menu.addComponent(add);
menu.setWidth("10%");
// Content:
VerticalLayout content = new VerticalLayout();
// Table:
Table t = new Table();
t.addContainerProperty("A", Long.class, null);
t.addContainerProperty("B", String.class, null);
t.addContainerProperty("C", Date.class, null);
content.addComponent(t);
mainView.addComponent(menu);
mainView.addComponent(content);
mainView.setExpandRatio(content, 1);
root.addComponent(mainView);
}
My problem is setting the menu width. I was expecting the menu area to have a 10% width of the mainView layout. But what i get instead is that the content area expands to full size and the menu is hidden:
If I remove the setExpandRatio, it will, as expected, use 50% of the mainView layout.
I have tested a similar scenario using a VerticalLayout and the setExpandRatio works as I expected in that case.
Can someone point out what i’m doing wrong?