[FIXED] How to style grid cells in vaadin

Issue

I have created a simple grid with one column:

public MyGrid() {
    addComponentColumn(this::getIcon).setClassNameGenerator(i -> "icon-img");
    setItems(/** some items */);
    setClassName("sidebar-grid");
}

And I have a css theme called mangaTheme. I use it like this @Theme("mangaTheme"). In the mangaTheme folder I have styles.css file with the following content:

.icon-img {
    padding: 0;
}

.sidebar-grid {
    width: 102px;
    margin: auto;
    margin-left: -30%;
}

The sidebar-grid css properties are applied properly as the grid is moved, but the icon-img properties are not applied whatsoever:

The classnames are applied:

What am I doing wrong or missing? I have also read this guide: https://cookbook.vaadin.com/dynamic-grid-cell-styling

EDIT: After configuring my workspace as was mentioned in the answer this is the resulting structure, but it still does not seem to function properly.

Solution

What you're missing is that the cell <td> element is inside the shadow DOM of the vaadin-grid component, and thus cannot be styled with global CSS. To style parts of components that are inside the component's shadow DOM, you need to inject the CSS into the component.

In the Cookbook example, this is done through the themeFor parameter in the annotation that loads the stylesheet:

@CssImport(themeFor = "vaadin-grid", value = "./recipe/dynamicgridcellstyling/dynamic-grid-cell-styling.css")

In your theme folder, however, you can do the same thing by putting that CSS in a stylesheet called vaadin-grid.css in the components subfolder, i.e.:

themes/mangaTheme/components/vaadin-grid.css

Another thing you're missing is that the classname is applied to the <td> cell, but the padding is on the vaadin-grid-cell-content element slotted into the cell, not the cell itself, so you need to rewrite your selector:

.icon-img ::slotted(vaadin-grid-cell-content) {
    padding: 0;
}

(The sidebar-grid CSS class works fine as-is because it's applied to the vaadin-grid root element, which is in the page's regular DOM.)

Answered By - Rolf
Answer Checked By - Gilberto Lyons (JavaFixing Admin)