Grid Row Word Wrap

Vaadin 6 / 7 / 8
1

I know there were a few posts, but the one that I saw referenced was
https://vaadin.com/forum#!/thread/10036547
.

Has anyone had any luck getting word wrap to work on a Grid? I have some longer text lines that are getting cut short.

Thank you,
Evan

2

This requires extensive work with theming / CSS.

First you need to set row height larger so that it can accomodate multiple lines.

After that there are two apporaches. You can set HTML renderer to the column having the long text and add HTML-line break tags in the places you want. Alternatively you could set styles to wrap the text in the cell. You probably need to use cell style generator in order to isolate your styling etc. E.g. this property could be used
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
 and set overflow properties accordingly.

3

Bummer. I was hoping for a more simplified answer :slight_smile:

Is Table an option to have a auto wrap without going tinto the CSS complexities or is it the same issue?

Thanks for the quick response, Tatu.

4

Also in Table you need some CSS to solve this one. You could try something like this:

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

Here “my-table” is the style name that you set to Table you want to wrap the text in. If you want to wrap text only in one column you need cell style generator (check e.g. this old thread: https://vaadin.com/forum#!/thread/1065548)

Note by doing this trick, you may witness some jerkiness in Table scrolling.

5

Thanks for the tips! Might have to think of another way to try it then. I’m not sure I’ll need the feature it is for yet, so I’ll put it on hold. Basically have quotes and authors on a page and could potentially scroll the quotes, but that would seem kind of odd.