VerticalLayout má ve výchozím nastavení šířku 100% a výšku nedefinovánu (undefined). To znamená, že na šířku se roztáhne do velikosti okna prohlížeče a výška se přizpůsobí velikosti komponent, které obsahuje. Pokud je výška větší než okno prohlížeče, objeví se posuvník.
final VerticalLayout layout = new VerticalLayout();
Label l1 = new Label("Ahoj");
Label l2 = new Label("Nazdar");
Label l3 = new Label("Čau");
layout.addComponents(l1, l2, l3);
setContent(layout);
Pozicování komponent se provádí pomocí metody setComponentAlignment(). Tato metoda se volá až po přidání komponent do layoutu.
final VerticalLayout layout = new VerticalLayout();
Label l1 = new Label("Ahoj");
Label l2 = new Label("Nazdar");
Label l3 = new Label("Čau");
layout.addComponents(l1, l2, l3);
layout.setComponentAlignment(l1, Alignment.MIDDLE_CENTER);
layout.setComponentAlignment(l2, Alignment.TOP_LEFT);
layout.setComponentAlignment(l3, Alignment.BOTTOM_RIGHT);
setContent(layout);
Na přechozím obrázku je vidět, že zarovnání na CENTER zabralo, ale umístění MIDDLE nemělo vliv. Pokud nastavíte vertical layoutu výšku na 100%, zabere celé okno prohlížeče a potom i MIDDLE bude mít význam.
final VerticalLayout layout = new VerticalLayout();
layout.setHeight(100, Unit.PERCENTAGE);
Label l1 = new Label("Ahoj");
Label l2 = new Label("Nazdar");
Label l3 = new Label("Čau");
layout.addComponents(l1, l2, l3);
layout.setComponentAlignment(l1, Alignment.MIDDLE_CENTER);
layout.setComponentAlignment(l2, Alignment.TOP_LEFT);
layout.setComponentAlignment(l3, Alignment.BOTTOM_RIGHT);
setContent(layout);
Problém je ale v tom, že pokud budou komponenty zabírat více místa, neobjeví se posuvník a komponenty se budou překrývat.
