How to have different styled grids on one page (Vaadin 12)

Flow
1

Hi, i have a theming problem again. This time with the vaadin grid component.

I want to have different styled grids on one page. Therefore i tried to use the new (V12) theming attribute.

grid.getElement().getThemeList().add("mytheme");

My problem is that the theme=“mytheme” Attribute is only applied to “vaadin-grid” and not its child elements like “vaadin-grid-cell-content”. Therefore i can not style a single grid without styling all grids in my application. Why is this theme attribute not applied to all child elements?

Is there some kind of workaround for this?

In my UseCase i want to style the row-height, font-size, header color, … of only one specific grid on my page and not all.

2

Hi Jonas,

Try styling [part="row"] instead. The following example was tested with 12.0.3.

Java

grid.addThemeName("test");

HTML

<dom-module id="my-grid" theme-for="vaadin-grid">
  <template>
    <style>
      :host([theme="test"]
) [part="row"]
 {
        font-size: 8px;
        min-height: 80px;
      }
    </style>
  </template>
</dom-module>
3

Sadly this is NOT working for me. Currently i have the following code which works but it is applied to all grids on my page:

<dom-module id="grid-customs-theme" theme-for="vaadin-grid">
    <template>
        <style>
            [part~="header-cell"]
 ::slotted(vaadin-grid-cell-content), [part~="footer-cell"]
 ::slotted(vaadin-grid-cell-content), [part~="reorder-ghost"]
 {
                font-size: 13px;
                font-weight: 500;
            }
            [part="row"]
:only-child [part~="header-cell"]
 {
                min-height: 0 !important;
            }

            [part~="cell"]
 {
                min-height: 0 !important;
            }

            :host {
                font-size: 13px;
            }

            :host(:not([theme~="no-row-borders"]
)) [part="row"]
[first]
 [part~="cell"]
:not([part~="details-cell"]
) {
                min-height: 0 !important;
            }
            :host(:not([theme~="no-row-borders"]
)) [part="row"]
:last-child [part~="header-cell"]
   {
                background-color: var(--nearly-black) !important;
            }


        </style>
    </template>
</dom-module>

when i change it to:

<dom-module id="grid-customs-theme" theme-for="vaadin-grid">
    <template>
        <style>
			:host([theme="grid-customs-theme"]
) [part="row"]
 {
				font-size: 8px;
				min-height: 80px;
			  }
        </style>
    </template>
</dom-module>

nothing changes compared to the stock grid theme (not the font-size or the height of the rows)

4

Hi Jonas,

That’s strange. Did you add the theme name to the grid?

5

Yes i added the theme name (using Vaadin 12.0.3), it is also showing in the HTML Code:

<vaadin-grid theme="column-borders grid-customs-theme row-stripes" height-by-rows="" style="touch-action: none;">...
6

Change :host([theme="grid-customs-theme"] ) to :host([theme~="grid-customs-theme"] ).

7 
:host([theme~="grid-customs-theme"]
)

Thank you very much, this worked for me!