UI Table scrollbar issue - expecting a solution

I was stuck on this issue for a while. Here is the problem descrption. Hopefully to get a workable solution.

My client enviornment - PC Windows XP, Browse: Chrome or IE. Display: 10", 1024*600 (low resolution) in the small laptop.

UI of My application can be demostrated as below, hope that helps to understand what the problem is and helps to figure out a solution:

centerLayout -
VerticalLayout, contained by mainWindow – No any width/height/side setting on centerLayout

(VerticalLayout) - contained by centerLayout - setting is exactly like below

table myTable
- contained by vLayout - setting as below code, just 4 columns * 6 rows data in the table (1 line text per row), the display has enough room to place the content of each row


2 or 3 buttons contained by HorizontalLayout which contained by vLayout - this doesn't impact the problem/solution.

Now the problem is: if I remove this code line above - myTable.setWidth(“450px”), the scrollbar will disappear as expected, however some table column becames narrow without displaying the content completely.(e.g. say “hello this is a vaadin”, I can see “hello this is” only). And no matter how I call setWidth - pixel or pencentage the scrollbar around the table (both direction) will appear, this is not good.

By the way if I browse the similar app in a high resolution display (e.g. 1600*1200), the scrollbar will be gone (the code line: even myTable.setWidth(“450px”) used, no scrollbar either).

Any solution? Thanks.

Have you tried setting the width of the columns themselves? e.g. myTable.setColumnWidth(“column1”, 20px);

You could also try overriding the table class, and setting Table#alwaysRecalculateColumnWidths : e.g.
Table myTable = new Table(){
{alwaysRecalculateColumnWidths=true}; // Static initializer block

Basically, if the table itself doesn’t have a fixed width, then the columns must have (or it they will revert to a default size).

Obviously, I don’t know your particular usecase here - but really, the Vaadin Table component is intended to hold many rows, and sevreal columns - and scrolling around the dataset is part of it’s whole reason-for-being. What you seem to be suggesting is that you have a fixed number of rows and columns; if you’re just trying to use the table to lay out some text or components, then using a GridLayout may be more appropriate. Alternatively, simply generating an HTML table and sticking it in a Label might be more appropriate.




Thanks Charles. I tried alwaysRecalculateColumnWidths=true and setColumnWidth also, both of them doesn’t work for my case. So I have to theTable.setWidth(fixed pixel) in order to show the column text completely. The only issue is - scrollbars in both direction show up in the table.

I understand to use Label (HTML table) for my table content, however how should I handle the action if I use HTML table, e.g. user click / select some column of the table, how to add a listener or I can only add link then go to another URL (Application) to process it when use clicks the link? Any further suggestion on this?

I would suggest
using the GridLayout



Thanks Charles. I can understand the solution you proposed.

Also sharing a update to you - I just solved the issue regarding scrollbar show-up around the table. The problem (scrollbar) should be caused by my custom Theme, I replaced the Theme with one of these provided by vaadin (e.g. runo), the scrollbar around the table is gone even called theTable.setWidth, that matches my need. The means I got a solution now although I don’t know exactly where the direct cause is in my custom theme (css file).

Again, thanks for your help.