dynamic height for table

I’m trying to build a simple layout that looks something like:

Tabsheet_1 Tabsheet_2

Input _______ More Input ____________ Checkbox

Table Column 1 Table Column 2








I’m using a VerticalLayout and a Grid Layout for the area above the table. I added SetSizeFull to the VerticalLayout and to the table but the table just covers 50% of the browser window. But I would like the table to always fill the remaining height of the browser window.

Regards
Roger

try with setExpandRatio:


VerticalLayout vl= new VerticalLayout();
vl.setExpandRatio(table,1.0f);
vl.setSizeFull();

Hi. It goes like Xavier said. Just remember to set the table and all the containing layouts to full size, including the root layout of the window. If the table is inside the tabsheet, set also it and the root layout of the tab to full size.

There’s a
basic on-line example
about the expand ratios. The book has more detailed examples, see for example the
section on VerticalLayout and HorizontalLayout
, which explains the expand ratios in detail.

Hi,

I think that I followed your suggestions but it doesn’t work. I looked at the examples and I know that it should work but I can’t figure out what I’m doing wrong.

Regards
Roger


public void initView() {
		
		setSizeFull(); // root Window
		
		VerticalLayout vlOverview = new VerticalLayout();
		vlOverview.setMargin(true);
		vlOverview.setSizeFull();
		
		initMainTable(vlOverview);
		
		VerticalLayout vlDetail = new VerticalLayout();
		vlDetail.setMargin(true);
		vlDetail.setSizeFull();
	
		tabSheet = new TabSheet();
		tabSheet.setSizeFull();
				
		tabSheet.addTab(vlOverview, "Overview", null);
		tabSheet.addTab(vlDetail, "Detail", null);

		addComponent(tabSheet);


	}

	private void initMainTable(VerticalLayout vlOverview) {
		tblUebersicht.setSizeFull();
		tblUebersicht.setStyleName("v-table-padding-top");
	        vlOverview.addComponent(tblUebersicht);				
		vlOverview.setExpandRatio(tblUebersicht, 1.0f);
		tblUebersicht.setSelectable(true);	    	
	}

So how does it look like now? which part is still wrong? the table only takes 50% or something else? Could you provide a screen shot with description of the app?

Hi,

yes the table only takes 50% of the available space. I can send a screenshot this evening.

Regards
Roger

Here is the screenshot.

Regards
Roger
11437.png

Every window (and panel) has a default layout inside of it. When you do window.addComponent(c) it will in reality call window.getContent().addComponent(c). Might be that this layout is causing the size problems? For this reason you should set both to size full if you want them to take up the whole space of the screen. Add this after your setSizeFull() (row 4):

VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setSizeFull();
setContent(mainLayout);

If you still have problems, add ‘?debug’ at the end of your URL and press analyze layouts on the little window that pops on top of your application. It should give you some ideas on what’s going wrong.

Thanks for the tip. Everything is working now as expected.

Regards
Roger