Vaadin 7 UI Design By Example Beginner's Guide

Time for action – setting layouts size

Let's make our layout component use all the available space on the page:

1. Set the size of the MainLayout by adding the following line to the constructor:

   setSizeFull();

2. Set the size of the lowerSection and its components by adding the following to the MainLayout constructor:

   lowerSection.setSizeFull();
   menuLayout.setSizeFull();
   contentLayout.setSizeFull();

3. Run the application.

What just happened?

This is what happens to the layouts when we make them size full:

We are getting closer to our aim. However, there is still a gap between the header and the lower component.