Omryf Omryf - 14 days ago 7
Java Question

Vaadin layout spacing

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?

The gap

Answer

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:

enter image description here

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:

enter image description here

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:

enter image description here