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).

Ingathering

some code , a screenshot or live demo would help. – Culmiferous

I also find it disappointing that sometimes scrollers appear for some controls in Vaadin. Try to catch the problematic <div> with Firebug and share your findings. – Adcock

Well, that is the problem. All the layout elements have the right width. Even the table element (I mean the <div> wrapper) has the desired width. But the <table> element inside has width of 731px sometimes. That's why scrolling appears. – Ingathering

do you have a custom theme in your application. Often when you get extra scrollbars you are theming something in a way that isn't supported. Try adding to the end of your application url ?theme=reindeer and see if you still get scrollbars. – Patently

I have tried that, and the table didn't show the scrollbars. However, as I wrote, under my theme, sometimes scrollbars are there and sometimes not. Really weird. – Ingathering

Then you would have to remove parts of your theme until you find the row that causes the behavior. It is usually margins, paddings or borders. – Patently

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;
}

Platas

Answer 2

you should use

table.setPageLength(0);

it's will remove all scroolbar in vaadin table.

Anastigmat

This only removes the vertical one – Elodia

Answer 3

try

grid.recalculateColumnWidths()

Bagnio

Add some explanation with answer for how this answer help OP in fixing current issue – Pell

This helped me with horizontal scrollbar showing in my table created using Grid component when changing data dynamically. Thanks! – Represent

when the vertical scroll appears, all the columns in grid maintain their original size, then appears the horizontal scroll to show columns hiddens by the vertical scroll. – Bagnio