Hello!
I have searched in den vaadin book as well as in the forum but I didn´t find an answer which helped me. I have ab application which consists of a header with the height 100px a tabsheet and a footer where I added the version of the programm. The content of each tab conists of a horizontal split panel.
Now I want that on each resolution the height of the application is sized automatically. The footer should always be on the bottom of the browser window, followed by the tabsheet etc.
I have set the tabsheet to setSizeFull.
What I want is the same which vaadin makes automatically in the horizontal axe on the vertical axe. The demo has also that feature that the application always uses the full height of the broweser window.
Check out the
Application style layout example from the Sampler. Click “View source” above the demo to see how it’s done.
The basic concepts to achieve this are relative sizing (percentages), expand ratios and knowing that there’s one default layout inside the initial main window you create for your application (with undefined height).
Hello!
I have already tried this, as well as I tried to design the application like in this posting:
But however I am not able to do that. If I debug I get the message about a vertical Layout with undefined height which I didn´t created an which I do not find.
This is the code of my application. I created a new project with no content just to try to realize the 100% height:
public class LayoutdemoApplication extends Application {
private static final long serialVersionUID = 6607753111717953432L;
@Override
public void init() {
VerticalLayout main = new VerticalLayout();
main.setSizeFull();
main.setStyleName("dummy1");
// now the banner
HorizontalLayout banner = new HorizontalLayout();
banner.setWidth("100%");
// add a headline to the banner
Label headline = new Label("<h1>Testanwendung</h1>");
headline.setContentMode(Label.CONTENT_XHTML);
banner.addComponent(headline);
main.addComponent(banner);
// now we add a left and a right content
HorizontalLayout leftRight = new HorizontalLayout();
leftRight.setSizeFull();
leftRight.setStyleName("dummy3");
leftRight.setMargin(true);
leftRight.setSpacing(true);
// some content to the left
Label left = new Label("Left content");
leftRight.addComponent(left);
// some content to the right
Label right = new Label("Right Content");
leftRight.addComponent(right);
// now add the content to the main layout
main.addComponent(leftRight);
// now we want to have that the rest of the page will be filled by the conten layout
main.setExpandRatio(leftRight, 1.0f);
Window mainWindow = new Window("Layoutdemo Application");
mainWindow.addComponent(main);
setMainWindow(mainWindow);
setTheme("layoutdemotheme");
}
}
I hope someone can tell me what am I doing wrong. Thanks!!!
Again, not really doing any testing, but from what I see, the primary difference between what you do and what we do is, instead of:
mainWindow.addComponent(main);
use:
mainWindow.setContent(main);
The default content of a Window, like a Panel, is a VerticalLayout, with margins set. So when you do an addComponent(), you are adding your VerticalLayout TO another VerticalLayout, which no doubt has no height set. Replace the content with your VerticalLayout and it should have it all as expected.