I’ve spent at least 3 hours trying to figure out how to change the background of a grid. I didn’t include the css file because I’ve tried about 10 different things. Also, why can’t you just use setClassName?
public class SetupPipelinesView extends ViewFrame implements AfterNavigationObserver {
@CssImport(value="./styles/views/upload-grid.css", themeFor="vaadin-grid")
private class PipelineDetails {
attachmentGrid.addComponentColumn(item -> createRemoveButton(attachmentGrid, item)).setFlexGrow(0).setWidth("55px").setClassNameGenerator(attachment -> "background");
attachmentGrid.addComponentColumn(AttachmentComponent::new).setTextAlign(ColumnTextAlign.START).setClassNameGenerator(attachment -> "background");
Hi,
I think your main problem is the place of the annotation.
I can’t find anything in the documentation but I think that the CssImport should be added on top of Component:
@CssImport(value="./styles/views/upload-grid.css", themeFor="vaadin-grid")
public class SetupPipelinesView extends ViewFrame implements AfterNavigationObserver {
private class PipelineDetails {
If you want to set the background of the color that does not depend on the content of the row then setClassName is the right Java method:
For example this file upload-grid.css:
With this css imported with CssImport, all the grid will have the background color red and the grid with grid.setClassName("background-example"); in pink.
[part~="cell"]
{
/* Styles that affect all grid cells, including header, body and footer cells */
}
[part~="body-cell"]
{
/* Styles that only affect all body cells */
}
But I agree that the theming inside a webcomponent can be pretty annoying.
Hi Jean-Christophe
I still can’t change the cell background color. I can change the grid background color, but that seems to be pointless if the cell color overrides the grid color. I’ve tried the import annotation on the outer class, the inner class, and the inner and outer. The cells are still color: var(–lumo-body-text-color).
I don’t understand why it’s not working.
I’ve got the same code and the background is correct.
/* Set the background of the grid if the grid has .upload-grid css class */
:host(.upload-grid) {
background-color: var(--lumo-primary-color-10pct);
}
/* Set the background of the cell if the grid has .upload-grid css class */
:host(.upload-grid) [part~="cell"]
{
background-color: var(--lumo-primary-color-10pct);
}
/* Set the background of the cell if the cell has upload-grid css class */
[part~="cell"]
.upload-grid {
background-color: var(--lumo-primary-color-10pct);
}
And here one example of a simple view:
@CssImport(value="./styles/upload-grid.css", themeFor="vaadin-grid")
@Route("bug")
public class BugView extends VerticalLayout {
private Grid<MessageBean> messageBeanGrid;
public BugView() {
messageBeanGrid = new Grid<>();
messageBeanGrid.setItems(createMessages());
messageBeanGrid.addComponentColumn(item -> new Button(item.getMessage())).setFlexGrow(0).setWidth("55px")
.setClassNameGenerator(e -> "upload-grid");
messageBeanGrid.addComponentColumn(item -> new Button(item.getMessage())).setTextAlign(ColumnTextAlign.START)
.setClassNameGenerator(e -> "upload-grid");
add(new RouterLink("navigate",BugView.class));
messageBeanGrid.setClassName("upload-grid");
messageBeanGrid.setSizeFull();
setSizeFull();
add(messageBeanGrid);
}
private List<MessageBean> createMessages() {
return IntStream.range(0, 10).mapToObj(i -> new MessageBean()).collect(Collectors.toList());
}
public class MessageBean {
private String message;
private String time;
public String getMessage() {
return "Button was clicked at " + LocalTime.now() + message;
}
public void setMessage(String message) {
this.message = message;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
}
}
I’ve attached a screenshot of the inspector, Perhaps you have css that overrides the default behaviour? (the default cell background color should be --lumo-base-color not --lumo-body-text-color)
