Vaadin layout spacing

Question

Just playing with Vaadin, looks like very basic layout problem. code:

final VerticalLayout screen = new VerticalLayout();
//screen.setStyleName("mid-blue");
screen.setWidth("100%");
screen.setHeight("100%");
screen.setSpacing(false);
screen.setMargin(false);


final VerticalLayout top = new VerticalLayout();
screen.addComponent(top);
top.setStyleName("black");
top.setWidth("100%");
top.setHeight("30%");
top.setSpacing(false);
top.setMargin(false);

final VerticalLayout bot = new VerticalLayout();
screen.addComponent(bot);
bot.setStyleName("light-blue");
bot.setWidth("60%");
bot.setHeight("100%");
bot.setSpacing(false);
bot.setMargin(false);

screen.setComponentAlignment(bot,Alignment.TOP_CENTER);
setContent(screen);

css:

@import "../valo/valo.scss";

@mixin test {
@include valo;

.mid-blue {
    background: #71C6E5;
}
.black {
    background: black;
}
.light-blue {
    background-color: #A2DCF2;
}
.white {
    background-color: white;
}
.green {
    background: green;
 }
 }

Can you please explain why is there such a huge gap between the layouts and how to control or remove it?

Answer 1

You can control this by using the concept of expand ratios when using Vertical and Horizontal Layouts in Vaadin. By default a vertical layout with a defined height allocate the same amount of 'slot' space to each item (in your example 50% will be allocated to top and 50% to bot. I've added a red and blue box around the top and bot portions of your layout to show that Vaadin has allocated 50% to each:

You can set the expand ratios as follows to control this:

final VerticalLayout screen = new VerticalLayout();
...
final VerticalLayout top = new VerticalLayout();
...
final VerticalLayout bot = new VerticalLayout();
...

// Set expand ratios
screen.setExpandRatio(top, 3);
screen.setExpandRatio(bot, 7);

This way, top will be 30% and bot 70%. You can tweak these values to get the layout you desire. Adding the above code will result in the following layout:

The whitespace is now being caused by the fact that height of top is set to 30%:

final VerticalLayout top = new VerticalLayout();
...
top.setHeight("30%");

If you don't want the gap at all you can set the height of top to 100% and you will get the following result: