CODEWITHSUNDEEP
vaadinvaadin8vaadin-grid
Tony
Tony

Reputation: 87

How to make text in vaadin Grid cell to wrap

I need to make Vaadin 8 Grid cell text wrap. I tried to follow this link in Vaadin Forum. https://vaadin.com/forum/thread/16908210/vaadin-8-grid-wrap-long-lines

My Grid contains Strings only in every cell.

I have a StyleGenerator class like this:

public class MyGridStyleGenerator<ArrayList> implements StyleGenerator {        
    public String apply(Object item) {          
        return ".m-grid-cell-wrapper";
    }
}

I am converting from Vaadin 6 so I still use old theme ("../reindeer/legacy-styles.css")

In my styles.css file, there is:

.m-grid-cell-wrapper {
   word-wrap: break-word;
   white-space: normal;
}

In the class that creates the Grid, I have:

Grid<List<String>> table = new Grid<>("My Test Grid");
//skip setting items code since the cell content shows up fine.
MyGridStyleGenerator style = new MyGridStyleGenerator();
table.setStyleGenerator(style);
table.setBodyRowHeight(35); // more than two lines of text height

I set each column width to a fixed value using setWidth() of Grid.Column so that more columns can be displayed in the given window.

The problem is that when the Grid is displayed, text longer than column width does not wrap.
What did I miss?
Thanks for any advice.

BTW, there is another question on this topic in Stack Overflow where the answer is to use label.setStyleName(ValoTheme.LAYOUT_HORIZONTAL_WRAPPING);
I don't have Label and don't use Valo style.

Upvotes: 2

Views: 986

Answers (1)

Tony
Tony

Reputation: 87

The CSS class controlling the Grid cell is .v-grid-cell, so I added the following in my styles.css file.

.v-grid-cell {
white-space: normal;  }

This caused the text in Grid cell to wrap.

Upvotes: 2

Related Questions