Vaadin table keeps showing scrollbars

Question

I have a Table component inside some layouts and I don't want it to show any scrollbars.

The table will always show only 25 rows, and the width should always be 720px. However, the table keeps showing both vertical and horizontal scrollbars and I cannot figure out how. The funny thing is(although I am rather crying now), that sometimes the scrollbars disappear. When I keep refreshing the page, sometimes they vanish and everything is ok.

Here are couple infos I have collected after hours of debugging:

1. Sometimes, the icons/images/etc. aren't loaded and are displayed from cash, sometimes they are. And guess what, this is also switch the scrollbars on and off, although the images are still displayed.
2. The width of each column is sometimes couple pixels more - and that's why the horizontal scrollbar shows up and I think that's is also why the vertical scrollbar shows up (because the horizontal takes some pixels from the height of the table)
3. I have tried to call requestRepaint after filling the table, even requestRepaintAll on the parent component, and its parent, and its parent, etc...
4. I have tried setting the width of each column in percentage. 100000.) I think I have tried all other things between 4 and 100000.

I must be missing something. A lot of people have this problem, and I've found a lot of threads directly on the vaadin page, but there is no THIS-DEFINITELY-WORKS solution.

EDIT CODE:

Table t = new Table();
t.setWidth("720px");
t.setImmediate(true);
t.setSelectable(true);

// Headers
t.addContainerProperty("fullName", String.class,  null, "Meno", null, null);
t.setColumnExpandRatio("fullName", 22);

t.addContainerProperty("dateOfBirth", Date.class,  null, "Narodenie", null, null);
t.setColumnExpandRatio("dateOfBirth", 18);

t.addContainerProperty("lastYearCosts", BigDecimal.class,  null, "Náklady", null, null);
t.setColumnExpandRatio("lastYearCosts", 10);

t.addContainerProperty("lastYearBalance", BigDecimal.class,  null, "Saldo", null, null);
t.setColumnExpandRatio("lastYearBalance", 10);

t.addContainerProperty("activeClient", ComparableBooleanEmbeddedIcon.class,  null, "", new ThemeResource("icons/icon-app-header-medipartner.png"), Table.ALIGN_CENTER);
t.setColumnExpandRatio("lastYearBalance", 8);

t.addContainerProperty("dmsCount", String.class,  null, "", new ThemeResource("icons/icon-app-header-heart.png"), null);
t.setColumnExpandRatio("dmsCount", 8);

t.addContainerProperty("authCount", String.class,  null, "", new ThemeResource("icons/icon-app-header-warnings.png"), null);
t.setColumnExpandRatio("authCount", 8);

t.addContainerProperty("book", CssLayout.class,  null, "Objednať", null, Table.ALIGN_CENTER);
t.setColumnExpandRatio("book", 16);

Then, I am just filling in rows with addItem(Object[] item).

Answer 1

I had the same issue - annoying scrollbars. I fixed that using my own theme and overriding css style.

To do so in your implementation of Application you have to to set your theme calling setTheme("mytheme").

Then when you define table you can use your own style (to distinguish that problematic table from others):

Table table = new Table()
table.addStyleName("mystyle")

And then you have to define your own css style in VAADIN/themes/mytheme/styles.css:

@import "../reindeer/styles.css";
.v-table-mymodel .v-scrollable {
    overflow: hidden;
}

Answer 2

you should use

table.setPageLength(0);

it's will remove all scroolbar in vaadin table.

Answer 3

try

grid.recalculateColumnWidths()