O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

What just happened?

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required