Wrapping cells in table

I found a thread that was helpful in enabling wrapping text in table cells. I have added the following to my custom style sheet:

.v-table-cell-wrapper{
white-space: normal;
}

It works great except for one thing. When the table receives focus or loses focus, the lines below the selected row “jump” a few pixels. I have spent a great deal of time with css debuggers and manipulating the

.v-table-focus .v-table-cell-content

and

.v-table-focus .v-table-cell-wrapper

declarations, but nothing seems to help. Any ideas?

OK, figured it out. One must add this declaration as well:

.v-table-focus .v-table-cell-wrapper{
white-space: normal;
}

Now it works properly.

Also, in case you want vertical alignment (which I think looks nicer), add this:

.v-table-cell-content{
vertical-align: top;
}

Hey Jeff,

thats exactly what I was looking for. Just works perfekt :slight_smile: The combination of both declarations are necessary. Thanks for the hint.

Regards,
Oliver

Hi,

I am looking for a solution for this too.

Solution posted here does not work.

For few rows solution is almost OK, but for more (15) vertical scroll bar will represent more rows than actually are in table. (So you scroll to 50th% and you’ll see the last row).
This is valid also for few rows - table get a scroll bar - which is not necessary.

:wacko:

I’ve spent 5 days to solve this.

No result.

Here is my last approach:

label inside cell must have a “white-space: normal;” style.

To fix vertical scroll bar:

.v-table-cell-wrapper{
height: auto !important;
}
.v-table-body-noselection{
height: auto !important;
}

label in cell must have height too (+ that white space):
white-space: normal;
height :auto !important;

Rows will be several pixes height in case of fast scrolling. (FF, Chrome.)

Fix for this is disabling caching. (some threads in forum solved it):

table.setCacheRate(500);
table.setPageLength(0);

which introduces new problem… it’s slow. (120 rows in table; FF processing time 2 seconds, serverside 4 seconds → it sleeps in method addItem(), there is a thread https://vaadin.com/de/forum/-/message_boards/view_message/17639 result: “don’t disable row buffering” →

… funny.

From my point of view Vaadin is happy with table that:

  • can not wrap long labels (ok - it can, but server and client get swet) OR you have to know the height of label (not my case). and height is set on client side - there is no way to ge it of course.
  • no colSpan
  • no rowSpan

You guys rule.

Thanks for putting this up. I would NOT have figured this out.