Vaadin 25 CSS styles.css file location and colouring rows

Flow
1

According to the V25 documentation the styles.css file should be located as follows…

Stylesheets, placed in the src/main/resources/META-INF/resources folder, are loaded with the @StyleSheet annotation.

Is this correct? The styles.css file I place into this folder does not seem to work. I am trying to colour a row in a Grid component per the Grid component Styling instructions for " Dynamically Styling Rows & Columns" and my css instructions seem to be ignored.

Here’s my code for the AppShell…

@StyleSheet(Aura.STYLESHEET)
@StyleSheet(“styles.css”)
public class AppShellITSiMonitor implements AppShellConfigurator {

Here’s my code for the grid…

        gridMonitoredItem.getColumnByKey("Status").setPartNameGenerator((t) -> {
            return (t.getIsLoggedIn() && t.getIMonUser().isIsMonitored()) ? "cell_connected_right2" : "cell_not_connected_right";
        });

Here’s my CSS setting in styles.css

vaadin-grid::part(cell_not_connected_right) {
background-color: lightsalmon;
text-align: right;
}

Is there something that I’m missing?

Thanks,
Andrew

2

I’m not sure, but there might be an issue in the new Aura theme that prevents overriding background-color, as it uses background-image to apply the cell color. You could try background instead, and see if that helpes.

That possible issue should not affect text-align however, so if that also is not working, then we’re probably looking at something else.

Can you check if any other styles are getting applied?

3

Did you try simplifying it to remove your logic? There doesn’t seem anything fundamentally wrong here as a grid with

        taskGrid.getColumns().get(0).setPartNameGenerator((t) -> {
            return "cell_not_connected_right";
        });

and corresponding css

vaadin-grid::part(cell_not_connected_right) {
  background-color: lightsalmon;
}

changes the background of the first column

4

I switched the CSS as you suggested and included the additional css for “right2” and neither change affected the output. I also removed the text-align and tried text-align: center. I also stopped the application did a full clean and compile to make sure there wasn’t anything that was preventing a live reload of the styles.css file.

So the path to the styles.css is definitely `src/main/resources/META-INF/resources’?

vaadin-grid::part(cell_not_connected_right) {
background: lightsalmon;
text-align: right;
}
vaadin-grid::part(cell_not_connected_right2) {
background: blue;
text-align: center;
}

My intent is to colour the whole row and what I had using @Theme worked in V24

5

That path is correct, yes.

Could you apply some static styles in your css to see if those get applied?
E.g. if you have some buttons somewhere you could try adding this to styles.css and see if that has any effect:

vaadin-button {
  background: red !important;
}

That makes it a lot easier to pinpoint the problem without also having to consider the possibility of those part names not getting dynamically applied as they should, and the difficulty of checking part names applied to a Grid cell with browser dev tools.

6

Adding that style did not change any buttons.

image
image755×112 12.8 KB

BTW, trying to drill down into the elements with the browser tools is quite painful and doing so crashes Firefox on Debian. It doesn’t crash Chromium on Debian though. I can see the “cell_not_connected_right” on the cell when I drill down into the cell that should be coloured.

7

Ok, good, now we know the stylesheet is not being loaded!

Some thoughts:

  1. Could be a servlet URL mapping issue – see Using stylesheets in Vaadin applications
  2. Could be a Spring security issue – see Using stylesheets in Vaadin applications
8

I’m not using Spring. I just tried “context://styles.css” but still no change. I’m just running my app as a war file for Tomcat app V11.0.14

9

Did you check the browser network tab to see if there’s the HTTP request that loads the stylesheet?
Are you deploying your application as a WAR file? Which servlet container?
Maybe the servlet container is not serving resources from META-INF/resources.
If you are packaging the WAR with Maven, try to move the stylesheet in src/main/webapp (How to load resources dynamically in Vaadin).

10

If this is the case where should the styles.css file be? Something like src/main/webapp/META-INF/resources/styles.css?

11

src/main/webapp/styles.css

12

Sorry. I should have read the page you referred to first but I just moved my files to that location, did a clean and rebuild of the war file and still no CSS is being applied.

13

But is the resource served? What happens if you access it directly from the browser (e.g. http://localhost:8080/styles.css)? Can you see the contents? or do you get a 404 response? Or something else?

14

I can see the content of the file if I use the context of the app.

http://localhost:8080/MyApp/styles.css

15

By context, you mean the web application context-path, not a custom servelt mapping, right?

16

That’s right, I think. So the app is running from Tomcat webapps/MyApp and when I access my app via the browser I’m using http://localhost:8080/MyApp.

My Servlet looks like this…

@WebServlet(urlPatterns = “/*”, name = “MyApp”, asyncSupported = true, initParams = {
@WebInitParam(name = “heartbeatInterval”, value = “30”), // was 30
@WebInitParam(name = “closeIdleSessions”, value = “false”)}) // was false
public class ServletITSiMonitor extends VaadinServlet

17

If you can see the resource at http://localhost:8080/MyApp/styles.css and if you confirm that it is loaded correctly also when you open your Vaadin view (looking for it in the browser network tools), then I have no idea why the styles are not applied.

Any relevant messages in the browser console?

18

You nailed it! There was an error loading the styles.css file. It was being searched for at http://localhost:8080/MyApp/MyApp.

So I just moved my styles.css file into src/main/webapp/MyApp and it applied the CSS tags.

Thank you!!

Actually I now see it was my fault. Trying to get to the bottom of the problem I changed the path to my @StyleSheet to “MyApp/styles.css” Removing the “MyApp” part let it load from the proper src/main/webapp folder.

1 Like
20

Again thank you to everyone helping me get to the bottom of this. I’m now officially a V25 app developer. ;-)

1 Like
21

Glad to hear it worked out!

@marcoc_753, should we add some guidance to docs for others with a similar setup?
(I’m afraid my knowhow of different servlet configs etc is woefully inadequate for it…)