Layout with menu + some static & switchable content

My objective is to have a UI that has a menu in left side and beside it on the right the content area. The menu should be visible all the time and scrolling the content area should not scroll the menu. In the content area view should be switchable and change based on what was selected in the menu.

However here’s the part that makes this tricky for me: i also want some “static” content in that area that stays the same no matter what view the user selected in the menu. Basically i want some text displayed in top of the content area and also something under the content area (however this should not be visible all the time, only if user scrolls down the content area). Here’s a picture that maybe helps to understand what i’m trying to achieve:

Here’s the relevant code. Basically i have a HorizontalLayout that contains the menu and content section. Content section is a VerticalLayout where i’m trying to pile up the content. The current problem with this code is that the content section is not scrollable, if there’s content that doesn’t fit user’s window it’s just left out and is inaccessible. Note that the final solution i’m looking for must also have a menu that works correctly, meaning the menu should stay visible and intact even though user scrolls the content area. @Theme("valo") public class ValoThemeUI extends UI { ValoMenuLayout root = new ValoMenuLayout(); ComponentContainer viewDisplay = root.getContentContainer(); CssLayout menu = new CssLayout(); CssLayout menuItemsLayout = new CssLayout(); private Navigator navigator; private LinkedHashMap<String, String> menuItems = new LinkedHashMap<String, String>(); @Override protected void init(VaadinRequest request) { setContent(root); root.setWidth("100%"); root.addMenu(buildMenu()); addStyleName(ValoTheme.UI_WITH_MENU); navigator = new Navigator(this, viewDisplay); navigator.addView("textfields", TextFields.class); } CssLayout buildMenu() { // Add items menuItemsLayout.setPrimaryStyleName("valo-menuitems"); menu.addComponent(menuItemsLayout); Button b = new Button("Text Fields", new ClickListener() { @Override public void buttonClick(ClickEvent event) { } }); b.setPrimaryStyleName(ValoTheme.MENU_ITEM); menuItemsLayout.addComponent(b); return menu; } The actual “root” layout creation code. Note that simply using setSizeUndefined() is not a solution. It does make the whole page scrollable, but breaks the menu (the menu becomes scrollable along with the rest of the page and also loses it’s background color). public class ValoMenuLayout extends HorizontalLayout { CssLayout contentArea = new CssLayout(); CssLayout menuArea = new CssLayout(); public ValoMenuLayout() { setSizeFull(); //if this is setSizeUndefined it breaks the menu. VerticalLayout ver = new VerticalLayout(); menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT); contentArea.setPrimaryStyleName("valo-content"); contentArea.addStyleName("v-scrollable"); contentArea.setSizeFull(); ver.addComponent(new Label("text above content area")); ver.addComponent(contentArea); ver.addComponent(new Label("text below content area")); addComponents(menuArea, ver); setExpandRatio(ver, 1); } public ComponentContainer getContentContainer() { return contentArea; } public void addMenu(Component menu) { menu.addStyleName(ValoTheme.MENU_PART); menuArea.addComponent(menu); }

Hi,

One way to do that is by wrapping all the components on the right side in a Panel:

[font=courier new]
public class ValoMenuLayout extends HorizontalLayout {

public ValoMenuLayout() {

Panel rightPanel = new Panel(ver);
rightPanel.setStyleName(ValoTheme.PANEL_WELL);
rightPanel.setSizeFull();

    addComponents(menuArea, rightPanel);
    setExpandRatio(rightPanel, 1);
}
...

}
[/font]

Perfect, thanks!