Question

I have a problem with a gridLayout to adapted to user screen size, I want to create a gridLayout with 3 columns and 2 rows, the first row will contain a menu, the second row will be the body using a panel, and the first column X second row will contain a tree but I can’t get the result that I want, this code show the panel but not full size
Here’s my code I can’t found why it doesn’t work !!

@Override
public void init() {

    Window main = new Window("My App");
    main.setSizeFull();
    setMainWindow(main);

    VerticalLayout root = new VerticalLayout();
    main.setContent(root);
    main.getContent().setSizeFull();

    GridLayout grid = new GridLayout(3, 2);

    main.addComponent(grid);

    grid.setColumnExpandRatio(0, 0.13f);
    grid.setColumnExpandRatio(1, 0.86f);
    grid.setColumnExpandRatio(2, 0.0f);


    grid.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    grid.setWidth(100,Sizeable.UNITS_PERCENTAGE);


    grid.addComponent(new Label("menu"), 0, 0, 0, 1);
    grid.addComponent(new Label("tree"), 1, 0, 1, 0);

    Panel pan = new Panel();
    pan.setWidth(100, Sizeable.UNITS_PERCENTAGE);
    pan.setHeight(100, Sizeable.UNITS_PERCENTAGE);

    VerticalLayout body = new VerticalLayout();
    body.setSizeFull();

    body.addComponent(pan);

    grid.addComponent(body, 1, 1, 1, 1);

}

Answer 1

Before going into the specifics of your question I wanted to leave you with a tool that can help you understand how the components are expanding in Vaadin:

• add “?debug” to the end of the address you use to run your application (eg localhost/app/?debug”)
• little window will appear with buttons on top.
• press C to clear and then AL to analyse layout
• a tree of components will appear as result. You can browse that tree by pressing the plus signs
• every time you press a component (label, panel, etc) the component will be highlighted on the screen.

With this you can see that my code below has a layout that expands the entire screen, a panel that expands on the 2 last cells of the grid and labels with expanding width

The debug mode is documented on the book of Vaadin

I believe the components are expanding correctly but are in the wrong places. Check how GridLayout works in the book of vaadin.
The following code changes your coordinates and adds a label to show to you the panel is indeed taking the right cells of the grid. Also it seemed more logical to add the VerticalLayout to the panel for alignment than the other way around:

@Override
public void init() {


    Window main = new Window("My App");
    main.setSizeFull();
            setMainWindow(main);

            VerticalLayout root = new VerticalLayout();
    main.setContent(root);
    main.getContent().setSizeFull();

    GridLayout grid = new GridLayout(3, 2);

    main.addComponent(grid);

    grid.setColumnExpandRatio(0, 0.13f);
    grid.setColumnExpandRatio(1, 0.86f);
    grid.setColumnExpandRatio(2, 0.0f);


    grid.setHeight(100, Sizeable.UNITS_PERCENTAGE);
    grid.setWidth(100,Sizeable.UNITS_PERCENTAGE);


            grid.addComponent(new Label("menu"), 0, 0, 2, 0);

            grid.addComponent(new Label("tree"), 0, 1);

            Panel pan = new Panel();
    pan.setWidth(100, Sizeable.UNITS_PERCENTAGE);
    pan.setHeight(100, Sizeable.UNITS_PERCENTAGE);




    VerticalLayout body = new VerticalLayout();
    body.setSizeFull();
    pan.addComponent(body);

    Label bodyLabel= new Label("body panel taking the 2 columns of the last row");
    bodyLabel.setSizeUndefined();


    body.addComponent(bodyLabel);
    body.setComponentAlignment(bodyLabel, Alignment.MIDDLE_CENTER);

    grid.addComponent(pan, 1,1 , 2, 1);

         }