Vertical Layout Size

Vaadin 6 / 7 / 8 Framework UI
1

Hi All,

I’m not being able to define the percentual size of my layouts.

I want to have a verticalLayout with a full size, and then an horizontal layout that has a 20% height of the vertical one. Then I want an horizontalSplitPanel that has an 80% height of the vertical one as well.

This is the code:


 @Override
    public void init() {
    
    	setTheme("myTema");
        
        final Window mainWindow = new Window("Ventana Principal");
        mainWindow.addStyleName("window");
        mainWindow.setSizeFull();
        this.setMainWindow(mainWindow);
 
        //   root layout 
        VerticalLayout rootLayout = new VerticalLayout();
        [b]
rootLayout.setSizeFull();
[/b]
        
        mainWindow.setContent(rootLayout);
        
        //   HEADER   
        HorizontalLayout headerLayout = new HorizontalLayout();
       
        [b]
headerLayout.setHeight(20, Sizeable.UNITS_PERCENTAGE);
[/b]
        headerLayout.setWidth(100, Sizeable.UNITS_PERCENTAGE);
        headerLayout.addStyleName("header");

        Label headerLabel = new Label("Header Content");
        headerLabel.setSizeFull();
        headerLayout.addComponent(headerLabel);
        
        //  BODY  
        HorizontalSplitPanel splitPanel = new HorizontalSplitPanel();
       
        splitPanel.addStyleName("splitPanel");
        [b]
splitPanel.setHeight(80, Sizeable.UNITS_PERCENTAGE);
[/b]
        splitPanel.setWidth(100, Sizeable.UNITS_PERCENTAGE);
        splitPanel.setFirstComponent(new Label("First Component"));
        splitPanel.setSecondComponent(new Label("Second Component"));
        
        // ADDING COMPONENTS 
        rootLayout.addComponent(headerLayout);
        rootLayout.addComponent(splitPanel);
    }

The problem is that the horizontalLayout height is the 50% height of the vertical one instead of the 20% I defined. The same situation for the horizontalSplitPanel. It’s like the mainLayout (the vertical one) is setting the height percentage depending the amount of layouts/components attached to it. Not sure which is the behavior…

I should be missing something…

I will appreciate any help with this.

Thanks,
Milo.

2

You need to use expand ratios in the rootLayout to accomplish that. Give both the headerLayout and the splitPanel 100% height. Then, set the expand ratio for the headerLayout to 0.20 and for the splitPanel to 0.80. That should do it.

Something like “rootLayout.setExpandRatio(headerLayout, 0.2f)”, etc.

See the
expand ratios for VerticalLauyout and HorizontalLayout
.

3

Thanks so much!!

It is exactly what I needed !