problem theming vaadin-grid

Flow
1

Hi,

I’m just discovering vaadin-grid and am playing around with it to replace iron-list in my application.

Currently, each iron-list ‘item’ is an element of its own (which encapsulates the columns), so my vaadin-grid has just a single vaadin-grid-column. At some point, I’ll break the columns out of the dedicated elements, and use multiple vaadin-grid-columns in the vaadin-grid itself.

One difference I see is that vaadin-grid (or vaadin-grid-column), is adding a padding, which I don’t want, so I’m looking at removing it.

Previously, I’ve had trouble theming the vaadin-combo-box, and someone here provided the solution:

<dom-module id="remove-combo-box-margins" theme-for="vaadin-combo-box">
  <template>
    <style>
      :host(.no-margin) [part="text-field"]
 {
        margin: 0;
        padding: 0;
      }
    </style>
  </template>
</dom-module>

....

<dom-module id="my-element">

...

            <vaadin-combo-box class$="no-margin">
            </vaadin-combo-box>

That all works fine, but I guess I haven’t had my ‘aha’ moment yet, because I don’t get how to apply this technique to the vaadin-grid.

I see in dev tools that the padding is:

[part~="cell"]
 ::slotted(vaadin-grid-cell-content) {
    padding: 8px 16px;
}

and the vaadin-docs say:

Styling
The following shadow DOM parts are available for styling:

Part name	Description
row	Row in the internal table
cell	Cell in the internal table
header-cell	Header cell in the internal table
body-cell	Body cell in the internal table
footer-cell	Footer cell in the internal table
details-cell	Row details cell in the internal table
resize-handle	Handle for resizing the columns
reorder-ghost	Ghost element of the header cell being dragged

So, I conclude ‘cell’ is the part name I’m trying to influence.

…but I’ve tried:

<dom-module id="remove-grid-padding" theme-for="vaadin-grid">
  <template>
    <style>
      [part~="cell"]
 {
        padding: 0;
      }
    </style>
  </template>
</dom-module>

and also ‘theme-for=“vaading-grid-column”’, and likewise ‘vaadin-grid-cell-content’, to no avail.

Can someone help me have my ‘aha’ moment with this theming technique? What am I missing?

PS A simple example in the docs right where the parts are listed would be really useful, I think.

2

Hrm, it is such that I don’t even need to use this mechanism, and can just style ‘vaadin-grid-cell-content’ directly since it’s not in the shadow root. That does seem to work, but it seems really odd because I don’t even have that element in my markup, and the ‘style’ shown in dev tools seems to suggest it is the ‘cell’ part, but the cell part seems to be a element…and the padding isn’t related to that.

Is applying the style directly the ‘right’ way? It seems very counter-intuitive :confused:

3

Hi Max,

The padding is indeed on vaadin-grid-cell-content. It’s applied like this:

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

Source: https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html#L47.

How to remove it:

<dom-module id="remove-grid-padding" theme-for="vaadin-grid">
  <template>
    <style>
      [part~="cell"]
 ::slotted(vaadin-grid-cell-content) {
        padding: 0;
      }
    </style>
  </template>
</dom-module>

Hope that helps.

4

Ah, so I simply identify the offending rule using the dev tools, then override it on this theming dom module for whatever the element is I’m using in my markup.

That seems a straight forward enough technique to follow. I suppose it is the ‘::slotted(vaadin-grid-cell-content)’ that was missing…and it didn’t really occur to me since I don’t have any ‘vaadin-grid-cell-content’ elements in my markup.

Thanks for the help :slight_smile: