Vaadin Table height is changed Automatically?

Hi Friends,
I used Vaadin Table component in my application and i set a page length to 15, Length of the Table is not consistent in different screens resolutions . For example in 1440 x 900 resolution height of the table is big but in 1280 x 1024 resolution the height of the table is less . I don’t know how to solve this problem.Can any one help me to sort out this problem.

Thanks in advance.

Hi Saravana,

table’s page length is not a height for a table, this is an amount of rows that will be pre-fetched from the server-side to display in a table. While you scrolling the table, another set of rows will be pre-fetched, so in a single period of time client-side UI does not contain more that page length + some extra rows (up and down) rows.

If you set page length to zero - yes, in this case table will fetch all the rows to the client. Combining zeroed page length
with undefined table height will produce a plain long table listing without a scroll bars (however, parent container or browser window scrollbars will appear instead)

According the table height - you can set the non-zero page length and explicit height in pixels or percent or set it to setSizeFull to accomodate parent container - so your table visual height will be exact you want in all situations and lazy loading feature initialized

Almost correct. One small correction:

When the Table’s height is left undefined (null or -1), the height is determined by the pageLength. So if the pageLength is 10, ten rows should be visible in the table, and the table’s height is exactly ten times one row’s height plus the header. And as Dmitri said, if the pageLength is zero, all rows will be visible, without a scrollbar.

But I’m a bit baffled by the relation of this to the screen resolution? Only if you use relative sizes for the table should screen size have any difference in the layout.

Can you post a code snippet that exhibits this behavior?


	
		Table t=new Table();
		t.setMultiSelect(true);
		t.setPageLength(10);
		t.setWidth("100%");
		t.setHeight("80%");	
		t.setSelectable(true);		
		t.setImmediate(true);
				
		t.setContainerDataSource(getTableDataSource());
                mainWindow.addComponent(t);
		setMainWindow(mainWindow);


	    		

This is the code snippet of my table. If i give the table height in the % i could not feel any difference in the height.
But if i give the height in pixel or point i can feel the difference in height of the table.Can any one make it clear why the height is not changing when using % value.

Hi,

The code you pasted does not compile as parts are missing but I guess the problem is that the height of the parent of the table (by default a VerticalLayout inside the window unless you have changed it using setContent()) is undefined which in turn will make the table height undefined. In this case the height of the table is determined, as Jouni said, by the pagelength. You can see if this is the problem by adding a “?debug” parameter to your application url and click “analyze layouts”.

If this indeed is the problem it can be fixed by changing the height of the layout to 100%:

mainWindow.getContent().setHeight("100%");

Though I do not see how this relates to the original screen resolution question.

I was working a similar problem. I wasn’t worried as much with the exact table’s height as with how many rows were being displayed.

In my case, I want the table to expand as rows are added, so that the table is always just a little bit bigger than it needs to be.

Here’s some example code. I’ve only included the most relevant bits, so you can’t just run it on its own.


public class MyClass extends Table {

	public MyClass(...)
	{
		this.setWidth("100%"); // fill parent <td>'s width, allows draggable sizing.
		// note: do NOT setHeight().

		setupColumns();
		setupBehavior();
		addDataToTable();

		adjustHeight();
	}

	// I also have a function (not shown) to add rows to the table when 
		// a button is clicked.  That function calls adjustHeight() (shown below).

	public void adjustHeight()
	{
		this.setPageLength(this.getItemIds().size() + 1);
		this.requestRepaint();
	}
}