Styles for Grid in Vaadin 14

Flow
1

After reading all around and research on google, I have not been able to find an effective example on how to customize appearance of a grid, on row height, fonts, header size, header color etc.

Please help

2

Hi Jorge,

Rows have a [minimum height]
(https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html#L41) but if the content is larger than that it’ll expand.

The font family is set on [line 14]
(https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html#L14). You can either use something other than --lumo-font-family or you can update it.

A header’s font size and minimum height is set on [line 186]
(https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html#L186) and [197]
(https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html#L197) respectively.

You can set the header color with:

[part~="header-cell"]
 ::slotted(vaadin-grid-cell-content) {
  color: var(--lumo-secondary-text-color);
}

Hope that helps.

3

Thanks for your answer. The online video tutorial on theming is incomplete and even with the downloaded code and relative instructions, it’s impossible to figure out how to act. There is no way to learn on how to load any css or html settings modifying the theme. Is there a way to learn that effectively and be able to work on a Vaadin flow 14 project ?

4

Because of what I explained, I would not know how to apply those instructions about line xxx etc

5

Please respond also with a suggestion as to a complete course, paid or not for learning how to use the theme customization in Vaadin 14

6

Hi Jorge,

I’d recommend reading the [theming crash course for V14]
(https://vaadin.com/docs/v14/flow/theme/theming-crash-course.html). That usually covers the most frequent questions.

If you need something more in-depth I’d start from the [overview]
(https://vaadin.com/docs/v14/flow/theme/theming-overview.html) and work my way through the docs.

7

Joacim

I already took that crash course and have been through all of the materials in your web site about theming and unfortunately I found many inconsistencies and none specific instruction, that can help me to achieve customization of components in terms of css

Please try to help me a little bit more, or indicate me exactly how to reference from CSS standpoint all the CSS variables in the Grid and other components. Besides this how to load and make work a global CSS file

8

Hi Jorge,

I’ll try to help as much as I can. What’s your current project setup? Did you use one of the starters or did you start from scratch?

9

Yes Joacim, offcourse I executed it with Vaadin 14.0.0RC6

10

Which starter are you using? Simple App? Do you have a file in frontend/styles called shared-styles.html?

11

Joacim, I am using the only starter available for Spring and yes I have a shared-styles file in frontend/styles

12

Hi Jorge,

I assume that means you’re using the commercial Full Stack App (aka Bakery) starter. If you open up shared-styles.html you should see (starting on line 181):

<dom-module id="bakery-grid-theme" theme-for="vaadin-grid">
 <template>
  <style>
   ...
  </style>
 </template>
</dom-module>

Inside that style block is where you put your CSS. These styles are scoped and will only affect the grid. You can target the vaadin-grid itself with :host. More info on that is available [here]
(https://developer.mozilla.org/en-US/docs/Web/CSS/:host()).

The best way to make changes to a component’s theme IMO is to:

  1. Look at the [source code]
    (https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html) and try to find the relevant styles.
  2. Inspect the HTML DOM using your browser’s developer tools and see what’s being applied to the section you wish to change.

So let’s take row height as an example. If you do a bit of digging you’ll see that the row height is defined by:

  1. min-height at line [41]
    (https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html#L41) and [58]
    (https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html#L58).
  2. padding at line [47]
    (https://github.com/vaadin/vaadin-grid/blob/master/theme/lumo/vaadin-grid-styles.html#L47).
  3. its content.

So, if we want to change the row height we need to override those styles and/or change the content. For example:

<dom-module id="bakery-grid-theme" theme-for="vaadin-grid">
 <template>
  <style>
   ...
   [part~="cell"]
 {
    min-height: <value>;
   }
   :host(:not([theme~="no-row-borders"]
)) [part="row"]
[first]
 [part~="cell"]
:not([part~="details-cell"]
) {
    min-height: <value>;
   }
   [part~="cell"]
 ::slotted(vaadin-grid-cell-content) {
    padding: <value>;
   }
   ...
  </style>
 </template>
</dom-module>

I hope that helps.

13

Hi,

grid.setSelectionMode(SelectionMode.MULTI);

How can we access the checkboxes through java code, we want to set a style class for checkboxes in vaadin 14.