Themes and styling

[jarkko-sokeila]

• OS: Windows, Ubuntu
• JDK version: 11
• Gradle version: 5.6.3
• Vaadin Plugin version: 1.3

I'm not sure if this is bug or if I just do something wrong. My problem is that I have been trying to set padding to 0 in dialog content and also trying to set grid column style (bold) with setClassNameGenerator but neither works.

I have followed instructions and used cssimports in my mainlayout like this
@CssImport(value="./my-dialog-overlay-theme.css", themeFor = "vaadin-dialog-overlay")
@CssImport(value = "./boldGridColumn.css", themeFor = "vaadin-grid")

my-dialog-overlay-theme.css file looks like this

[part="content"] {
padding: 0;
}

boldGridColumn.css file looks like this

[part~="cell"].bold {
font-weight: bold;
}

In java setClassNameGenerator works fine and bold class name appears in the DOM

Does anyone know what the problem might be?

Related links for problems.
https://vaadin.com/learn/tutorials/themes-and-styling-in-vaadin#component-scope
https://vaadin.com/docs/v15/flow/theme/tutorial-theming-overlay.html
https://vaadin.com/forum/thread/18003166/vaadin-flow-14-treegrid-setclassnamegenerator-doesn-t-work-at-all

[johndevs]

There are a few reasons I can think of:

1. You don't have your css styles in src/main/stylesheets. Stylesheets in this folder will be automatically wrapped in a JS module to enable styling the shadow DOM of Vaadin components.

2. I didn't confirm it yet, but one reason could be that the Gradle plugin does not yet support the "themeFor" property of @CssImport. You should be able to work around that though by adjusting the CSS selector to be more specific to your grid.

[jarkko-sokeila]

1. css styles are in src/main/stylesheets so that can't be problem

Off the topic. I'm little confused. Where I should put my css and javascript files in different cases. File locations when using

1. vaadin version 10-13
2. vaadin version 14 in compatibility mode
3. vaadin version 14 in npm mode

There is documentation (https://vaadin.com/docs/v14/flow/importing-dependencies/tutorial-ways-of-importing.html) but what about when using gradle plugin? Where I should but my css and javacript files in each case when using spring boot and non spring boot projects?

[johndevs]

Support for all @CssImport annotation properties was indeed missing. I added support for them now so it should be available in the next release.

If you are using Vaadin 10-13 or Vaadin 14 compatibility mode have a look at this relevant DS Docs article.

The Vaadin 14 specific documentation can similarly be found here in DS Docs as well.

The Vaadin documentation is only written for the Maven plugin and there are many differences how Gradle and Maven works so in many cases there will be a slight difference in file structure and handling between the plugins.