Time for action – setting layouts size
Let's make our layout component use all the available space on the page:
- Set the size of the
MainLayout
by adding the following line to the constructor:setSizeFull();
- Set the size of the
lowerSection
and its components by adding the following to theMainLayout
constructor:lowerSection.setSizeFull(); menuLayout.setSizeFull(); contentLayout.setSizeFull();
- 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.
Get Vaadin 7 UI Design By Example Beginner's Guide now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.