Nested 100% height

General
1

I have an issue where I need to have nested layouts that expand to 100% height (i.e. pushing other components to the edge) and I am unable to do so. I know the docs say “A layout that contains components with percentual size must have a defined size”. Basically, I just have a base window with a header (as small height as possible), a footer (as small height as possible), and an inner layout that I want to take up all the height it can. Then I need to have an inner table that has a header and takes up 100% height too.

Here’s a brief version of what I have tried that isn’t working properly at all:

package com.example.temp;

import com.vaadin.Application;
import com.vaadin.ui.*;

@SuppressWarnings("serial")
public class TempApplication extends Application {
    
    @Override
    public void init() {
        //main window
        Window mainWindow = new Window("Temp Application");
        setMainWindow(mainWindow);
        //main window layout
        VerticalLayout layout = new VerticalLayout();
        layout.setSizeFull();
        mainWindow.setContent(layout);
        //header
        Label header = new Label("Header");
        header.setHeight(null);
        header.setWidth("100%");
        layout.addComponent(header);
        //inner contents
        VerticalLayout contents = new VerticalLayout();
        contents.setSizeFull();
        layout.addComponent(contents);
        layout.setExpandRatio(contents, 1.0f);
        //header inside inner contents
        Label subHeader = new Label("Sub Header");
        subHeader.setHeight(null);
        subHeader.setWidth("100%");
        contents.addComponent(subHeader);
        //table inside inner contents
        Table table = new Table("A Table");
        table.setSizeFull();
        contents.addComponent(table);
        contents.setExpandRatio(table, 1.0f);
        //footer
        Label footer = new Label("Footer");
        footer.setHeight(null);
        footer.setWidth("100%");
        layout.addComponent(footer);
    }

}

Is there anyway to accomplish this style of nested 100% height within Vaadin? I have tried dozens of combinations of size setting and expand ratio setting. I just want my inner layouts set to 100% height to push everything else unsized to the edge. Sorry if this has already been answered in the forums and I missed it.

2

Darn, I can’t find anything wrong in your code no matter how hard I look at it. Didn’t actually try it, but still.

Because I don’t exactly know whats’s going on, I will just ask these obvious questions :slight_smile: What version of Vaadin are you using? Do you have a custom widgetset in use? Do you have a custom theme?