Help please with layout alignment...


It’s my first time using Vaadin and I have some difficulties aligning some layouts.
The desired output is:

-------------------------------------------------HorizontalLayout (width 100% x height 50px)-----------------------------------------
|  ---------VerticalLayout (width 80% x height 40px)-----            ---VerticalLayout (width 20% x height 40px)-----          |

I’ve tried the code below but it doesn’t seem to work.

Thank you very much everyone for your time!

        HorizontalLayout top = new HorizontalLayout();
        top.setMargin(false, true, false, true); // Enable horizontal margins


        vlayout1 = new VerticalLayout();
        vlayout1 .setHeight("40px");
        vlayout2  = new VerticalLayout();
        vlayout2 .setWidth("100%");
        vlayout2 .setHeight("40px");
        top.setExpandRatio(vlayout1  1.0F);
        top.setExpandRatio(vlayout2, 2.0F);
top.setExpandRatio(vlayout1  1.0F);
        top.setExpandRatio(vlayout2, 2.0F);

This means you want vlayout2 to be twice as big as vlayout1. It doesn’t seem like it in your explanation.
Try :

top.setExpandRatio(vlayout1  8.0F);
        top.setExpandRatio(vlayout2, 2.0F);

Thank you very much.

It worked but not 100% as I expected…
The problem is when I resize the window then vlayout2 starts to disappear.

Is there a way to maintain the sizes of vlayout1(80%) & vlayout2(20%) during resize depending on the browser size?

Thanks again for your time.

I mostly copy/pasted it in an empty project and it resizes correctly.
Check between the following sample and your code what you may be missing (setting width of the window ?)

Try running with the parameter ?debug added to the URL, it will show a debug window. Then click on AL (or “Analyse Layouts” depending on versions) and it will output layout errors.

public class TestApplication extends Application {
    public void init() {
        Window mainWindow = new Window("Test Application");

        //Define the theme
        //Make window use all horizontal space
        mainWindow.setWidth(100, Component.UNITS_PERCENTAGE);
        //Add the layouts

    public void addTop(Window window) {
        HorizontalLayout top = new HorizontalLayout();
        top.setWidth(100, Component.UNITS_PERCENTAGE);
        top.setMargin(false, true, false, true); // Enable horizontal margins


        VerticalLayout vlayout1 = new VerticalLayout();
        vlayout1.setWidth(100, Component.UNITS_PERCENTAGE);
        vlayout1.setHeight(40, Component.UNITS_PIXELS);
        vlayout1.setStyleName(Reindeer.LAYOUT_BLACK); //give some color to see what happens

        VerticalLayout vlayout2 = new VerticalLayout();
        vlayout2.setWidth(100, Component.UNITS_PERCENTAGE);
        vlayout2.setHeight(40, Component.UNITS_PIXELS);
        vlayout2.setStyleName(Reindeer.LAYOUT_BLUE); //give some color to see what happens

        top.setExpandRatio(vlayout1, 8.0F);
        top.setExpandRatio(vlayout2, 2.0F);


Thank you very much!

It works like a charm…

Have a nice day!