VerticalLayout with percentual size without shrinking

Hi All!

Can anybody help me? I have VerticalLayout with percentual size and I want to insert into it some components. Some of these components have fixed size, some percentual. How can I realize it without auto-shrinking of VerticalLayout? (if it happens, some part of VerticalLayout become hidden by parent layout). Should I choose another layout or maybe anybody knows work-around?

Thank you!

I’m not sure I understood your use case completely, but if it’s scroll bars you are looking for you could try panel instead. If not, please elaborate a bit.

Here is an example:


public class MyApp extends Application {
    @Override
    public void init() {
        VerticalLayout verticalLayout=new VerticalLayout();
        verticalLayout.setMargin(false, true, false, true);
        Label label=new Label("Title");
        label.setHeight("100px");
        verticalLayout.addComponent(label);
        TabSheet tabSheet=new TabSheet();
        tabSheet.setSizeFull();
        VerticalLayout tabContent=new VerticalLayout();
        tabContent.setSizeFull();
        Panel panel=new Panel("Tab-panel-title");
        panel.addComponent(new TextField("Filter"));
        panel.addComponent(new TextField("Filter2"));
        panel.addComponent(new TextField("Filter3"));
        panel.addComponent(new TextField("Filter4"));
        panel.addComponent(new TextField("Filter5"));
        panel.addComponent(new TextField("Filter6"));
        panel.addComponent(new TextField("Filter7"));
        panel.addComponent(new TextField("Filter8"));
        panel.addComponent(new TextField("Filter9"));
        tabContent.addComponent(panel);
        Table table=new Table();
        tabContent.addComponent(table);
        Panel controlPanel=new Panel("Table-control");
        controlPanel.addComponent(new Button("Delete"));
        tabContent.addComponent(controlPanel);
        tabContent.setExpandRatio(controlPanel,1.0f);
        tabContent.setMargin(true);
        tabSheet.addTab(tabContent,"myTab");
        verticalLayout.addComponent(tabSheet);
        verticalLayout.setExpandRatio(tabSheet,1.0f);
        verticalLayout.setSizeFull();
        Window mainWindow=new Window("Window Title", verticalLayout);
        setMainWindow(mainWindow);
    }
}

I’d like to fix
Table-control
at the bottom of the screen,
Tab-panel-title
shows all
Filters
, and
Table
stretches up to fill the rest of
tabContent
. In this example
Table
doesn’t stretch, so
Table-control
doesn’t fit in tab: it is displayed incompletely or hidden at all. What should I do to solve a problem without scrolling?

Changing tabContent.setSizeFull() to

tabContent.setSizeUndefined(); // or tabContent.setHeight(“-1%”); - personally I prefer the first option
tabContent.setWidth(“100%”);

seems to help at least when I try it :slight_smile: Without it I can’t really see the panel at all, and only the upper edge of the table with 0 width and no contents that would force it to have width. The panel doesn’t fit on the page at all (at least on my monitor), the table takes so much room. This will give you vertical scrollbar, though - is that ok, or did you want to manage without either? You’ll probably want to limit the table’s size either way, for example with table.setWidth(“100%”) and table.setPageLength(3) (or how many rows you happen to want to see when you populate the table).

Yes. I’d like to manage without scrollbars. I can’t use fixed size (or setting count of rows for a table), because the layout should depend on client screen resolution.

How about adding scrollbars around the individual components, then? setSizeFull() to both panel and table, and panel.getContent().setSizeUndefined(). Then you can determine the relative sizes by setExpandratio().