CODEWITHSUNDEEP
javavaadinvaadin-gridvaadin14
Cribber
Cribber

Reputation: 2913

Vaadin 14 grid multi-line cells

I have quite long Strings in one column and I want to display them as multi-line cells in my grid. I'm using Vaadin 14 + Java and I tried to set CSS-Style Class for the specific column:

Java-Code:

@CssImport("./styles/shared-styles.css")
public class RisikoGrid extends Grid<RisikoEntity> {

    public RisikoGrid() {
         setSizeFull();

         // add the column to the grid
         addColumn(Entity::getAttribute).setHeader("MyCol")
            .setFlexGrow(10).setSortable(true).setKey("mycolumn");

         // set CSS style class for the specific column
         this.getColumnByKey("mycolumn").setClassNameGenerator(item -> {return "grid-mycol";});

   }
}

CSS (shared-styles.css)

.grid-mycol{
    background: red;
    white-space: normal;
    word-wrap: break-word;
}

While I do see the class-name when I use the inspector in my webbrowser (chrome), the css is not applied.

enter image description here

What do I need to change to make it work?

Edit: this is how my styles look like - and I can't even see the background:red for instance:

enter image description here

Upvotes: 1

Views: 1955

Answers (2)

Jouni
Jouni

Reputation: 2918

You can use the built-in wrap-cell-content theme variant to allow text to wrap inside the cells.

grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

See the last example on https://vaadin.com/components/vaadin-grid/html-examples/grid-theme-demos – the texts there are not that long, but if you make your browsers window narrow enough you’ll see some of the addresses wrap on two lines.

Upvotes: 5

Cribber
Cribber

Reputation: 2913

I looked into why my css settings didn't show up in the inspector and the solution was a minimal change from:

@CssImport("./styles/shared-styles.css")

to

@CssImport(value = "./styles/shared-styles.css", themeFor = "vaadin-grid")

I'm guessing the component scope of the grid differs from the global CSS.

It works now.

Upvotes: 2

Related Questions