7

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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Filip Majernik
  • 7,700
  • 13
  • 45
  • 53
  • some code , a screenshot or live demo would help. – Yazan Jaber Feb 16 '12 at 11:35
  • I also find it disappointing that sometimes scrollers appear for some controls in Vaadin. Try to catch the problematic `
    ` with Firebug and share your findings.
     – dma_k Feb 17 '12 at 00:15
  • Well, that is the problem. All the layout elements have the right width. Even the table element (I mean the
    wrapper) has the desired width. But the element inside has width of 731px sometimes. That's why scrolling appears.
     – Filip Majernik Feb 17 '12 at 07:57
  • 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. – Jens Jansson Feb 18 '12 at 16:44
  • 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. – Filip Majernik Feb 21 '12 at 13:51
  • 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. – Jens Jansson Feb 22 '12 at 07:35

3 Answers3

8

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;
}
Tatu Lund
  • 9,949
  • 1
  • 12
  • 26
rafalmag
  • 1,791
  • 1
  • 17
  • 24
3

you should use 

table.setPageLength(0);

it's will remove all scroolbar in vaadin table.

duccom
  • 134
  • 2
  • 16
1

try

grid.recalculateColumnWidths()
dscfgos
  • 11
  • 2
  • Add some explanation with answer for how this answer help OP in fixing current issue – ρяσѕρєя K May 09 '16 at 19:28
  • This helped me with horizontal scrollbar showing in my table created using `Grid` component when changing data dynamically. Thanks! – Micer Jun 02 '16 at 09:53
  • 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. – dscfgos Jun 03 '16 at 14:07