2

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.

Anna Koskinen
  • 1,362
  • 3
  • 22
Tony
  • 67
  • 5
  • I recommend to check your DOM and CSS styles with Chrome's dev tools. It may be that are some conflicting styles inherited from the legacy theme. – Tatu Lund Oct 21 '21 at 07:56
  • Thank you for the suggestion. Inspecting the Grid element revealed that my CSS class .m-grid-cell-wrapper is applied to grid row but not grid cell. Based on this, I found a solution which I'll put in answer. – Tony Oct 26 '21 at 19:29
  • @TatuLund Is there a way to make Grid row height auto expand? Now the text can wrap in a cell, but I still need to set the row height explicitly, which is troublesome when the text length changes a lot. Thanks. – Tony Oct 26 '21 at 19:46
  • 1
    "Is there a way to make Grid row height auto expand?" The simple answer is no. In Vaadin 8 Grid row height is fixed to be the same for all rows. This has been much requested feature though, and the new Grid component e.g. in Vaadin 14 and 2X supports automatically expanding row height and variable row heights. – Tatu Lund Oct 27 '21 at 06:51
  • Is it possible to back port the auto Grid row height feature to vaadin 8? – Tony Oct 27 '21 at 19:22
  • 1
    "Is it possible to back port the auto Grid row height feature to vaadin 8?", it is not possible without major remake of Grid, it is quite fundamental design limitation in the current version. Would it be possible to integrate the vaadin-grid web-component of Vaadin 14/2X to Vaadin 8? In theory yes, but that would also require substantial amount of work. – Tatu Lund Oct 28 '21 at 05:32

1 Answers1

1

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.

Tony
  • 67
  • 5