How to selectively apply style to grid cells

Flow
1

I am using a Grid and wish the cells to take up all the available space
Eventually I managed to get it working, the way I wanted by a combination of
grid.addThemeVariants(GridVariant.LUMO_COMPACT, GridVariant.LUMO_COLUMN_BORDERS);

and

vaadin-grid-cell-content {
    padding: 0 !important; /* Remove all padding */
    height: 100%;
}

However, this is being applied globally (I have multiple views with Grid)
How do I use a proper selector to apply this only to the grid in one view?

Thank you.

2

You can use css classes on either the grid or any other component (the view, the layout, whatever) in the dom above the grid and extend your css selector.

For instance setting

myView.addClassName("hello");

and apply it to your css

.hello vaadin-grid-cell-content {
    ...
}

But be careful to be not to general, otherwise other components might match those selectors, too. So you should/could make the selectors more specific depending on potential side effects.

And you should also check, if that !important is really needed, as this should always be the last resort.

1 Like
3

I just knew I was applying the selector wrong, but couldn’t figure out the right way.
Now thanks to you I do!

I now have

grid.addClassName("schedule");
.schedule vaadin-grid-cell-content {
    padding: 0;
    height: 100%;
}

and as expected, it is being applied only for this view.

Also, agree about the !important
I don’t even remember why I put it there, probably before I realised the GridVariant.LUMO_COMPACT is what I actually need.
I have removed it now.

Thank you Stefan!

1 Like