Hello
Im trying to build a web skeleton as Header, Content and Footer. And it look very weird, and I don know were is the problem. I’ve added a css “border” to show how it look like in webbrowser. It builds 3 v-slots with 33.3333% height, but I need Header to be 40 px, Footer also 40px, and Content rest.
Please Help me : D
This is my code.
VerticalLayout mainVerticalLayout = new VerticalLayout();
mainVerticalLayout.setSizeFull();
mainVerticalLayout.setSpacing(false);
mainVerticalLayout.addStyleName("border");
setContent(mainVerticalLayout);
getContent().setSizeFull();
MenuBar menuBar = new MenuBar();
menuBar.setWidth(100, Unit.PERCENTAGE);
menuBar.addStyleName("border");
MenuItem fileItem = menuBar.addItem("File", null);
MenuItem editItem = menuBar.addItem("Edit", null);
MenuItem viewItem = menuBar.addItem("View", null);
MenuItem toolsItem = menuBar.addItem("Tools", null);
HorizontalLayout content = new HorizontalLayout();
content.setSizeFull();
content.addComponent(new Label("Content"));
content.addStyleName("border");
HorizontalLayout footer = new HorizontalLayout();
footer.setHeight("40px");
footer.setWidth(100, Unit.PERCENTAGE);
footer.addComponent(new Label("Footer"));
footer.addStyleName("border");
mainVerticalLayout.addComponent(menuBar);
mainVerticalLayout.addComponent(content);
mainVerticalLayout.addComponent(footer);