Time for action – expanding components

Follow these steps to get rid of that gap:

1. VerticalLayout (and other layouts too) has a method to specify how contained components should expand. Try adding this line to the MainLayout constructor:

   setExpandRatio(lowerSection, 1);

2. Run the application.

What just happened?

Take a look at the resulting layout:

Think of expand ratios as the amount of space that some component can take inside its parent layout expressed as a ratio. Initially, upperSection and lowerSection had both an undefined expand ratio, which means that, to be fair, each could take at most 50 percent of the space in the parent layout. We haven't assigned any height for upperSection. Its height is undefined, so upperSection shrinks to use only the space it needs to hold the inner label showing the text Header. However, we assigned a height of 100 percent (by calling setSizeFull) to lowerSection, which means that it will occupy all the lower 50 percent of the space. Only the lower 50 percent...