java - Vaadin 14 格多行单元格

Question

我在一列中有很长的字符串，我想在我的网格中将它们显示为多行单元格。我正在使用 Vaadin 14 + Java，并尝试为特定列设置 CSS-Style Class：

Java代码：

@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（共享样式.css）

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

虽然在我的网络浏览器（chrome）中使用检查器时确实看到了类名，但没有应用 css。

我需要更改什么才能使其正常工作？

编辑：这就是我的样式的样子——我什至看不到背景：例如红色：

Answer 1

您可以使用内置wrap-cell-content主题变体来允许文本在单元格内换行。

grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

请参阅https://vaadin.com/components/vaadin-grid/html-examples/grid-theme-demos上的最后一个示例- 那里的文本没有那么长，但如果你让浏览器窗口足够窄，你会看到一些地址包含在两行中。

Answer 2

我调查了为什么我的 css 设置没有出现在检查器中，解决方案是一个最小的变化：

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

到

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

我猜网格的组件范围与全局 CSS 不同。

现在可以了。