Weird VerticalLayout behaviour

Hello!

Here is my code:

protected void initComponent() {

    	if(!tableCreated) {
            createSimCardsTable();
            tableCreated = true;
         }
    	
        setSizeFull();
        mainWindow = this.getWindow();
        
        simCardTablePanel.setWidth("100%");
        simCardTablePanel.setHeight("100%");
        simCardTablePanel.addComponent(simCardTable);
        
        basePanel.addComponent(simCardTablePanel);
        basePanel.setHeight("100%");
        basePanel.setScrollable(true);
        
        VerticalLayout base = new SVerticalLayout();
        base.setSizeFull();
        
        base.addStyleName("This-is-a-test");
        
        base.addComponent(inventoryFilterPanel);
        base.addComponent(basePanel);
        
        base.setExpandRatio(inventoryFilterPanel, 0.3F);
        base.setExpandRatio(basePanel, 1F);
        base.setComponentAlignment(inventoryFilterPanel, Alignment.TOP_LEFT);
        base.setComponentAlignment(basePanel, Alignment.TOP_CENTER);
        
        addComponent(base);
        setExpandRatio(base, 1.0F);
        setComponentAlignment(base, Alignment.MIDDLE_CENTER);

}

This is supposed to paint a component called inventoryFilterPanel on top a table component which is inside a Panel to allow scrolling in the table.
Now to the problem. For some reason in the VerticalLayout called base there is an additional VerticalLayout being generated, on top the FilterPanel and the Table, making my components move half the height down. It looks like this:

If I however remove the:

setFizeFull();

the layout will look like this:

But in this case there will be no scrolling of the table, so that’s no good either…

It seems like I’m caught between a rock and a hard place… =
Anyone out there who might have the faintest idea of what is causing this behaviour?

Hi.

I’m not quite sure of the exact problem, but I’ll make some guesses.

You don’t need to put Table inside a Panel to enable scrolling. The Table should always be scrollable if it has a defined size.

Panels contain a VerticalLayout by default. You can access the default layout with getContent(), or set the content yourself.

When a layout has a size (e.g. height) defined as 100%, it divides the space evenly amongst its children unless an expand ratio is used. What you’re seeing could easily be caused by

  1. a 100% height layout[*]
    a hidden first child

You wouldn’t happen to be using a Refresher or some other component with no visual representation?

Hi Risto, and thanks for your answer!

I have just this morning solved the issue. The main thing that was missing was to undefine the Panel content, basePanel.getContent().setSizeUndefined();. Along side with some minor changes.

I want to thank you for your effort though. I also see now in retrospect that my question was poorly composed and important declarations with the type of layout components was missing, so I feel the need to apologize for that… =)