Table auto-resize instead of scroll

In my app I have a table which looks like that:

Pretty simple. Users can modify table rows by clicking on the buttons on the right and editing the text in a special window that appears.

The problem is that when too much text is added to a cell, so that new line is needed, the table doesn’t resize respectively. Instead I get scrollbars:

…and that is not nice. On the other hand when I remove some text, so that cell height reduces, the table doesn’t get smaller:

I would like the table to adjust it’s size when needed- how can I achieve that?

Table page length is set to 0, table height to null, the container is BeanItemContainer and I use the Data API to modify data in Table (Properties, etc.)

Interesting thing is that when I add a new row in my app, the table resizes as expected and no scrollbars show up.

Sounds to me that your component(s) sizing is faulty.

On which component(s) is the table placed on. What are their size(s)? Have you taken a look at the debug-window (see section 11.4.1 Book Of Vaadin)?. Any errors there?

Thanks Kurt for your answer. I’ve checked debug-window but it seems that everything is OK with layouts. Below I’ve included part of the dump from Debug window output, showing the hierarchy of objects over my Table. It haven’t found any layout problems, nor I see any.

com.vaadin.terminal.gwt.client.ui.VWindow id=PID0 height=659px width=1304px
  com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID467 height=100.0% width=100.0% margins=0 alignments={} expandRatios={PID481:1,}
    com.vaadin.terminal.gwt.client.ui.VSplitPanelHorizontal id=PID481 height=100.0% width=100.0% style=small blue white margins=0 position=230px reversed=false
      com.vaadin.terminal.gwt.client.ui.VTabsheet id=PID483 height=100.0% width=100.0% style=borderless immediate=true
        tab caption=Test cases key=5 selected=true
          com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID484 height=100.0% width=100.0% margins=0 alignments={} expandRatios={PID485:1,}
            com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID485 height=100.0% width=100.0% style=white margins=0 spacing=true alignments={} expandRatios={PID486:1,}
              com.vaadin.terminal.gwt.client.ui.VPanel id=PID486 height=499px width=100.0% style=light

                com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID487 width=100.0% margins=15 alignments={} expandRatios={}
                  com.vaadin.terminal.gwt.client.ui.VVerticalLayout id=PID506 width=100.0% margins=0 alignments={} expandRatios={}
                    com.vaadin.terminal.gwt.client.ui.VScrollTable id=PID507 width=100.0% style=steps dragmode=1 selectmode=none cols=4 rows=5 firstrow=0 totalrows=5               colheaders=true colfooters=false alb={0:1,} vcolorder={0:1,1:2,2:3,3:4,}

Additionaly my Table has custom style for wrapping text in cells:

.steps .v-table-cell-wrapper {
white-space: normal;
padding-top: 8px;
padding-bottom: 8px;

Do you have any other ideas?

UPDATE: Removing or adding rows in my app (using Table.addItem() or Table.removeItem()) causes repaint of the table with new height. Only editing is problematic. Looks like a bug.

Unfortunately I do not have any other ideas. But I guess you are probably right, it looks like a bug.

If you think it’s a bug, please
report it

It seems to be a bug to me but I’m not a Vaadin pro-user (just 4 weeks of experience) and therefore it would be better if someone more skilled confirmed it. There is a great chance that it’s simply my newbie error

Variable heights of rows in tables are a little problematic. How do you update the content of the cell? Do you directly modify a Label or a Layout that is in that cell? If that is the case, then I don’t think that the table has any ways to notice the content change to trigger an internal repaint. You’d have to trigger the repaint manually.

Jens- I update the content of the cell with something like that:


Like I said this method works fine for adding or removing new items, but somehow just setting new value for the item’s property doesn’t work.

If I recall correctly, those properties should have a listener attached to them, and that the value is updated in the UI is a sign of that. At this point I think it should be the client side code of Table (VScrollTable) that should decide to repaint itself if needed, and it doesn’t seem to do that in cases were the row heights change on the fly.

This is a really old thread (4 years - where does the time go?!), but still relevant:
This is still an issue in 7.4.
Has a ticket been raised for this?

The synopsis of the issue is this:
Even if a Table is set to immediate mode, the client-side vtable doesn’t detect/repaint itself if one of its children (cells) gets updated (also on the client-side) that causes the cell size to change (e.g. Disclosure, Depot clicks - any client side resizing). The symptom is that the tbody is not ‘immediate’.
The problem is easily reproduced by adding an ItemClickListener to such a table. The test is to click on an item, not a client-side component (e.g. the thing that will expand a text area) - these events get consumed, so it needs to be ‘blank’ cell space. Place a table.markAsDirty() call in the itemClick() method, and this will tell the table body div to repaint.
Because of the client-side consumption of mouse events, this sadly is not a workaround, just a confirmation of the problem.