Can't get rid of Table's horizontal scrollbar

I stick to the tables at the moment :wink:

This is my layout: CustomLayout β†’ VerticalLayout β†’ Table

The CustomLayout has a fixed width, the VerticalLayout a sizeFull and the table also a sizeFull.

First i set column headers β†’ all ok,
Second i set column alignment β†’ all ok
Third i set column width with at least 1 column undefined so it can take up the rest of the free space (there IS free space) β†’ a horizontal scrollbar appears.

this scrollbar drives me crazy. is always scrolls only 2 pixels no matter of column count or column widths (there is always enough space).
if i fire up firebug and make the table-body 2 pixels wider the scrollbar disappears.

i’m using vaadin 6.6.0
did i miss something or is it a vaadin bug?

Hi,

It does sound like a bug - could you please provide a short code snippet that reproduces the problem? (I’m not sure I understood the whole setup correctly, and an example will speed things up if it’s indeed a bug.)

Best Regards,
Marc

Do you have border around your table set via CSS? If you do, the horizontal scrollbar can be caused by the border. We had similar scrollbar problem with VerticalLayout / HorizontalLayout in the past and our solutions were either changing the layout into CssLayout and set margin in the v-csslayout-margin so that child div can have border or set the overflow of the VerticalLayout/HorizontalLayout into hidden.

This is a good point - and the reason for making a small stand-alone example that reproduces the issue; if it still bugs in a simple environment w/o customized theme, it’s a bug, and easier to pinpoint.

Let us know when you find out more.

Best Regards,
Marc

Good point!
Actually it was not the border but the border-collapse that we used to ensure 1px borders between the cells:


.v-table-table {
	border-collapse: collapse;	
}

Removing border collapse removes the horizontal scrollbar. Dunno if this is a bug or not.

Thanks!

Thanks Jan

I had exactly the same problem in Vaadin 7 and adding the β€œborder-collape: collapse;” css fixed it. I’m only using Reindeer.TABLE_BORDERLESS style so I guess this style has border collapse built in.