Table scroll problem


I have a strange problem with automatic scrolling in a table. Not sure if it’s a bug or something in my implementation that are causing this.

In my application I have two tables. When selecting items in the first one the second table is populated with items. This works great with no problems. Now I added a new feature that will cause the second table to select the last item instead. This also works great as long the number of rows fits in the table. The problem starts when I add the function to let the table scroll down do the selected item.

For scrolling I use:


This almost works… here is three screenshots:

This is what happened when the application is newly launched and no manual scrolling have been done. The item in the second table is selected correctly but the scrolling stopped 1.5 row above the selected item.

Here is one without any scrolling needed. Last item is selected and this is how it should be. Now for some more strangeness:

Here is the same as the first screenshot. The only thing that has been done is whats shown in the second screenshot. From now on the scrolling stops only half a row from the selected item.

So the question is if it’s a known bug or not.

Some things I have tried:

setting pageLength to the same number as the number of items. This causes the scrolling to not work at all… pageLength set to 0 seems to be what is needed. I have also tried to removed the embedded icons in case any of them are of different size but there is no difference… the scrolling behaves the same…

I’m on vaadin 6.4 the early release and also might be worth to mention… the table content are populated using the progressindicator trick… Both to show the progressinditorator and also to be able to show “Loading” status while loading the content.

Here is an output from debug mode when selecting one of the items that causes the scrolling problem:

com.vaadin.terminal.gwt.client.ui.VScrollTable id=PID521 height=100.0% width=100.0% style=strong immediate=true selectmode=single cols=5 rows=7 nsa=false firstrow=2 totalrows=9 pagelength=8

It looks a bit strange that totalrows = 9 but pagelength = 8 this is with pageLength set to 0 on the table.

Tested in both safari, chrome and firefox… all showing the same problem…


Looking quickly at the screenshots my first guess is that the different sized icons are messing up the table.

The table currently does not support rows with differing heights and so when icons with different heights are used the rows get different heights and the page calculations fail. I think
covers this issue.

I think the problem is in how the setCurrentPageFirstItemId(itemId) works and that your table size can’t show an even amount of rows. As the function name says, it takes in the argument of the first item that should be shown in the table. You give it the very last item of the table.

The function has this code (with nonessential code removed):

int index = items.indexOfId(currentPageFirstItemId);
int maxIndex = size() - pageLength;
if (index > maxIndex) {

This means that it will shift the index you gave up so many steps that the table is filled (instead of scrolling further on than what there actually is items). You have 7.5 rows visible which it seems to interpret as 8. doing lastId - 8 will make the last row half visible in the table.

Unfortunately I don’t really have a solution to give. Only workaround that I can up with now is to specify a fixed pageLength, but then you lose the dynamic size of the table that you probably want and have right now.

I tried with disabling the icons (setting embedded to null) before and there was no change in the behaviour…

I see… the new function with keyboardscrolling to top and bottom works fine… maybe a future version can have a setter on table to go to the last row…

I will try and do a workaround by sorting the table in the other direction so the last item is shown at the top until there is a working solution.

Thanks for the help anyway! (and for Vaadin which is really great…) :slight_smile: