Theme Remove Style

Flow
1

Hi,

I have a problem with the padding of the grid cells
I did have found the problem from the ‘Inspect’ Element

:host([theme~=“compact”]
) [part~=“cell”]
::slotted(vaadin-grid-cell-content)

{
padding: var(–lumo-space-xs) var(–lumo-space-s);

}

I want to remove the bold letter padding from this style.

However looks like I am lost between java code and dom-module code

I am using a simple grid declared like this

//Custom Class

public class CustomGrid extends Grid

//Object Declared

CustomGrid grid = new CustomGrid();

//Using themes

grid.addThemeVariants(GridVariant.LUMO_NO_BORDER, GridVariant.MATERIAL_COLUMN_DIVIDERS,
			GridVariant.LUMO_WRAP_CELL_CONTENT, GridVariant.LUMO_COMPACT);

After.png is the effect after removing the above mentioned style.

Can someone help me out with this? :slight_smile:

17872823.png
17872826.png

2

Hi Somendu,

Create a CSS file grid.css and import it using @CssImport(value = "./styles/components/grid.css", themeFor = "vaadin-grid").

In that file you can override the style above.

grid.css

:host([theme~="compact"]
) [part~="cell"]
 ::slotted(vaadin-grid-cell-content) {
  padding: var(--lumo-space-xs) 0;
}