Strange behaviour of Table regarding its width

Hello
I’m trying to configure a Table widget, so that it takes 100% width in VerticalLayout (the layout is configured with setFullSize()).
Even though some tables might have as few as 3 columns, I’d like them to stretch and take the whole width of the parent VerticalLayout.
What happens is that even though I set table.setFullSize() the table takes as much as the headers want (values in cells are not long enough to contribute to column width).
I discovered, that when I set the height of the table via setPageLength(3) - I want those tables quite small in terms of height - they display correctly (that is take full width) only if I add getPageLength() + 1 items (then the vertical scrollbar appears)! If I add exactly (or less) as many items as getPageLength(), then the table is again as wide as before (< 100%)…
I don’t use any setColumnWidth nor setColumnExpandRatio methods…

Is this a known problem? Or am I missing something? :slight_smile:
I’ve attached my temporary code - this is very early work, but I’ve already stopped here, since I couldn’t make the table 100% wide.
It’s worth mentioning that I’m using Vaadin 7.2.6 with Reindeer theme.

Thank you in advace for any suggestions.
Piotr
16475.java (5.08 KB)

The Table should take the full vertical width with the code you provided, but it depends completely on the layout you have the table in. When the table doesn’t render correctly, check the DOM with e.g. the Chrome Inspector: the Table might be 100%, but if the wrapping layout is something different…

Hi Thomas
sorry, I should have mentioned that in my first post: the v-table element does have 100% width, but the header and cells wrapping elements get (from somewhere) the fixed width in pixels, and that’s where the problem is. I can’t find out why would they get this fixed width. My sorrounding layout is VerticalLayout in the Panel.

Could you provide a screenshot of the DOM inspector?

Hi Thomas
thank you for coming back to me. Our application now uses Vaadin 7.3.1 with Valo theme… The problem with the tables stayed unfortunately…

I’ve prepared you 2 screenshots:

  1. before-scroll-y.png - shows the DOM tree and the application - funny thing is that even though I call table.setSizeFull I don’t get the "width:100%
    " style on the v-table DOM node until I scroll (!?) the table
  2. after-scroll-y.png - shows the DOM and the application after I have scrolled the contents of the table vertically - the table suddenly gets the full width and the “width:100%” style appears on the DOM node.

Cheers
Piotr
16537.png
16538.png

Wow… that is extremely weird. It definitely goes under the category ‘that shouldn’t happen, ever’. Could you check that your widgetset is the correct version? (you can see the version number in the debug window, add ?debug to your url). Also, with the debug window open, reproduce the issue; if there are any Vaadin issues the you will get a big red exception notification when things go wrong.

Hi Thomas
no errors reported on the debug console, widgetset in the correct version… Still the problem is there ;-(

The next step is to remove things in your app until it works like expected (I assuma s simple test case with just a table works like it should?).