Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Vertical Layout Size

Alex C
10 years ago Mar 21, 2012 6:41pm

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.

Last updated on Mar, 21st 2012
Marko Grönroos
10 years ago Mar 21, 2012 8:28pm

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.

Last updated on Mar, 21st 2012
Alex C
10 years ago Mar 21, 2012 9:32pm