table scroll bars come and go

I’ve been using Vaadin now for almost three weeks and I love it.

But now I’ve got my first really big problem. I have a table that shows various components, e.g. native select, in the columns. The table’s height is undefined and the page length is zero. When I first display the table, it looks great. At the moment, I’m only showing 2 rows.

Now the fun starts. Suppose a user chooses a value from the native select which results in an error. In that case, I put a red border about the native select. As soon as this happens, I get vertical and horizontal scrollbars which I don’t want. I have plenty of real estate to show the entire table.

After driving myself crazy, I happened upon something weird. When I resize the browser window (making it smaller or larger), the table redraws without the scrollbars just like I want. I’m assuming there is no communication between the client and server for a resize of the browser window. Why would it render with scrollbars when there is a change in the contents of a cell? And why does the table render correctly without the scrollbars after resizing the browser?

By the way, I’ve seen this with multiple browsers: Firefox 3, Firefox 4, Chrome, Safari, and IE 7.

Thanks in advance.

You could try accommodating the space required for the error border for all native selects beforehand, with a transparent border if there is no error. Then the component size doesn’t change when you apply the error style to them, and hence the table doesn’t need to adjust in any way:

.v-table .v-nativeselect {
    border: 1px solid transparent;

Note: IE6 doesn’t support transparent borders.

Other option might be to specify margins for the selects and at the same time when you add the border reduce the margin by that amount.

The reason why the table redraws after you resize the browser is most likely because the size of the parent layout of the table resizes as well during the browser resize, so it informs its children to fit to the new dimensions.

Jouni, that is an excellent idea, but I also stumbled onto another solution. If I set the Page Length to always be one more than the actual number of rows in my table, it works fine. I don’t get the scroll bars. It’s a hack and I don’t mind the extra blank row at the end of the table. Thanks for your help.