The Thymeleaf template in Spring Boot does not display the necessary CSS styles

Question

The Thymeleaf template in Spring Boot does not display the necessary CSS styles

Currently, I am exploring the use of Thymeleaf and Flying Saucer for generating PDFs from templates. However, I have encountered an issue with applying CSS to my Thymeleaf template. Despite reviewing various questions & answers here, here, and here, none of the proposed solutions seem to solve my problem.

This is how my resources folder directory appears:

https://i.sstatic.net/8LOwi.png

I am utilizing the default directories that Spring searches for. The head tag in my template.html looks like this:

<head>
    <title>Spring Boot and Thymeleaf Example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css" th:href="@{/css/style.css}"/> 
</head>

If I embed my CSS directly into template.html, the resulting PDF file displays proper styling (indicating no issues with the PDF generation process). However, when attempting to link to the CSS file as demonstrated above, the generated PDF lacks proper styling (implying that the CSS is not being applied).

Moreover, I am able to access my CSS file at

http://localhost:8080/css/style.css

, so there seems to be no problem with Spring serving static content.

For clarity, here is how I generate the PDF document:

private final SpringTemplateEngine templateEngine;
private final Log log;

@Autowired
public PdfGenerator(SpringTemplateEngine templateEngine) {
    this.templateEngine = templateEngine;
    log = LogFactory.getLog(getClass());
}

public void generate(HttpServletRequest servletRequest, HttpServletResponse servletResponse, ServletContext servletContext) {
    // Parse the PDF template using Thymeleaf
    Locale locale = getLocale(servletRequest);
    WebContext context = new WebContext(servletRequest, servletResponse, servletContext, locale);
    context.setVariable("user", buildDummyUser());
    context.setVariable("discounts", buildDummyDiscounts());
    String html = templateEngine.process("template", context);

    // Generate the PDF using Flying Saucer
    try (OutputStream outputStream = new FileOutputStream("generated.pdf")) {
        ITextRenderer renderer = new ITextRenderer();
        renderer.setDocumentFromString(html);
        renderer.layout();
        renderer.createPDF(outputStream);
    } catch (IOException | DocumentException e) {
        log.error("Error while generating PDF", e);
    }
}

I opted for WebContext over Context due to encountering the following error with Context:

org.thymeleaf.exceptions.TemplateProcessingException: Link base "/css/style.css" cannot be context relative (/...) unless the context used for executing the engine implements the org.thymeleaf.context.IWebContext interface

My question remains: What am I overlooking here that results in my style.css failing to apply to template.html?

css spring-boot thymeleaf

Answer 1

Answer №1

Encountering similar issues, I attempted to utilize the thymeleaf template resolver for PDF generation. After conducting extensive research on thymeleaf and the spring framework, experimenting with WebContext, HttpServletRequest, and various Spring Thymeleaf integration solutions proved futile. It became apparent that the issue was not a syntax error, leading me to resort to using absolute paths instead of relative ones. For more information, refer to this URL.

My assumption stems from the fact that our resources are served on

localhost:8080/myapp/css/style.css

. The relative path to request resources varies depending on its context. For instance, in a typical thymeleaf model Veiw where HTML pages are returned to clients, the context would consist of the request hostname, port, and application context (e.g., localhost:8080/myapp). Consequently, the relative path will be constructed based on this context. In the case of /css/style.css as the relative path, combining the context and relative path results in

localhost:8080/myapp/css/style.css

.

Unlike the web context scenario, wherein offline templates reside on the server backend, the context shifts to the server's running context. Hence, the assumed context would be the local server path + appcontext (e.g., D:/myServer/apps/myapp), rendering the relative path /css/style.css as

D:/myServer/apps/myapp/css/style.css

, which proves impractical. To utilize static resources, providing the absolute path is imperative.

Initially, I resorted to:

<link rel="stylesheet" type="text/css" th:href="@{http://localhost:8080/myapp/css/style.css}"/>

While this solution worked adequately, it posed challenges when dealing with multiple hostnames or servers operating behind proxies. A hardcoded approach could become cumbersome. Therefore, determining the actual base URL that the user requests is crucial, necessitating the use of HttpServletRequest.

Here is my implemented code:

1. Configure the resource handler:

@Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/css/**")
    .addResourceLocations("classpath:/css/")
            .setCachePeriod(31556926);
}

Retrieve the base URL from HttpServletRequest, either by injecting it into the method, autowiring it in the service class, or accessing it via RequestContextHolder. In my Service class, the method getCurrentBaseUrl() accomplishes this task:

private static String getCurrentBaseUrl() {
ServletRequestAttributes sra = (ServletRequestAttributes)RequestContextHolder.getRequestAttributes();
HttpServletRequest req = sra.getRequest();
return req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + req.getContextPath();
}

This section demonstrates how the template engine is utilized in my class:

    Context context = new Context();
    context.setVariable("variales", variables);
    context.setVariable("baseUrl", getCurrentBaseUrl());
    String content = springTemplateEngine.process("myTemplate",context);

In my template file, absolute CSS URLs are employed as follows:

<link type="stylesheet" th:src="@{|${baseUrl}/css/style.css|}" />

Answer 2

Encountering similar issues, I attempted to utilize the thymeleaf template resolver for PDF generation. After conducting extensive research on thymeleaf and the spring framework, experimenting with WebContext, HttpServletRequest, and various Spring Thymeleaf integration solutions proved futile. It became apparent that the issue was not a syntax error, leading me to resort to using absolute paths instead of relative ones. For more information, refer to this URL.

My assumption stems from the fact that our resources are served on

localhost:8080/myapp/css/style.css

. The relative path to request resources varies depending on its context. For instance, in a typical thymeleaf model Veiw where HTML pages are returned to clients, the context would consist of the request hostname, port, and application context (e.g., localhost:8080/myapp). Consequently, the relative path will be constructed based on this context. In the case of /css/style.css as the relative path, combining the context and relative path results in

localhost:8080/myapp/css/style.css

.

Unlike the web context scenario, wherein offline templates reside on the server backend, the context shifts to the server's running context. Hence, the assumed context would be the local server path + appcontext (e.g., D:/myServer/apps/myapp), rendering the relative path /css/style.css as

D:/myServer/apps/myapp/css/style.css

, which proves impractical. To utilize static resources, providing the absolute path is imperative.

Initially, I resorted to:

<link rel="stylesheet" type="text/css" th:href="@{http://localhost:8080/myapp/css/style.css}"/>

While this solution worked adequately, it posed challenges when dealing with multiple hostnames or servers operating behind proxies. A hardcoded approach could become cumbersome. Therefore, determining the actual base URL that the user requests is crucial, necessitating the use of HttpServletRequest.

Here is my implemented code:

1. Configure the resource handler:

@Override
public void addResourceHandlers(final ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/css/**")
    .addResourceLocations("classpath:/css/")
            .setCachePeriod(31556926);
}

Retrieve the base URL from HttpServletRequest, either by injecting it into the method, autowiring it in the service class, or accessing it via RequestContextHolder. In my Service class, the method getCurrentBaseUrl() accomplishes this task:

private static String getCurrentBaseUrl() {
ServletRequestAttributes sra = (ServletRequestAttributes)RequestContextHolder.getRequestAttributes();
HttpServletRequest req = sra.getRequest();
return req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + req.getContextPath();
}

This section demonstrates how the template engine is utilized in my class:

    Context context = new Context();
    context.setVariable("variales", variables);
    context.setVariable("baseUrl", getCurrentBaseUrl());
    String content = springTemplateEngine.process("myTemplate",context);

In my template file, absolute CSS URLs are employed as follows:

<link type="stylesheet" th:src="@{|${baseUrl}/css/style.css|}" />

Answer 3

Answer №2

To fix the issue, I made adjustments to the path structure within the href attribute. My setup mirrored yours, with HTML files residing in the templates folder and CSS files in the static folder.

<head>
    <title>Example Using Spring Boot and Thymeleaf</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/> 
</head>

Implementing these changes should allow you to successfully style your HTML page with CSS.

Answer 4

To fix the issue, I made adjustments to the path structure within the href attribute. My setup mirrored yours, with HTML files residing in the templates folder and CSS files in the static folder.

<head>
    <title>Example Using Spring Boot and Thymeleaf</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/> 
</head>

Implementing these changes should allow you to successfully style your HTML page with CSS.

Answer 5

Answer №3

If you're struggling with this issue, make sure to specify the request mapping for your folders correctly when using the Spring Security dependency. You should organize your CSS file under the static/css folder in your project.

Once you have done that, include a link to the CSS file in your HTML code like this:

<link rel="stylesheet" th:href="@{/css/index.css}">

I hope this information proves helpful to someone out there!

Answer 6

If you're struggling with this issue, make sure to specify the request mapping for your folders correctly when using the Spring Security dependency. You should organize your CSS file under the static/css folder in your project.

Once you have done that, include a link to the CSS file in your HTML code like this:

<link rel="stylesheet" th:href="@{/css/index.css}">

I hope this information proves helpful to someone out there!

Answer 7

Answer №4

The syntax appears to be correct, so the issue is likely not related to syntax errors.

Additionally, attempting to utilize the @{...} syntax without an IWebContext interface will result in the exception you are currently experiencing.

Answer 8

The syntax appears to be correct, so the issue is likely not related to syntax errors.

Additionally, attempting to utilize the @{...} syntax without an IWebContext interface will result in the exception you are currently experiencing.

Answer 9

Answer №5

I have discovered a clever shortcut for handling this task efficiently. The solution is straightforward and effective. Instead of using the traditional method, I simply insert a CSS style tag directly into the body of a basic HTML document. This can be done by placing the following code within the HEAD section of my desired file:

<th:block th:insert="std-reports/std-reports-css-fragment.html :: style"></th:block>

Answer 10

I have discovered a clever shortcut for handling this task efficiently. The solution is straightforward and effective. Instead of using the traditional method, I simply insert a CSS style tag directly into the body of a basic HTML document. This can be done by placing the following code within the HEAD section of my desired file:

<th:block th:insert="std-reports/std-reports-css-fragment.html :: style"></th:block>

Answer 11

Answer №6

Dealing with a similar issue, I ran into a problem where my template page was not picking up the CSS styles.

The root cause of my problem turned out to be that the CSS file was in SASS format:

.table
   margin: 0 0 40px 0

After converting it to traditional CSS format like this:

 .table {
  margin: 0 0 40px 0;
  }

Voila! It worked like a charm.

Answer 12

Dealing with a similar issue, I ran into a problem where my template page was not picking up the CSS styles.

The root cause of my problem turned out to be that the CSS file was in SASS format:

.table
   margin: 0 0 40px 0

After converting it to traditional CSS format like this:

 .table {
  margin: 0 0 40px 0;
  }

Voila! It worked like a charm.

The Thymeleaf template in Spring Boot does not display the necessary CSS styles

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Convert traditional class-based styles to inline styles

Align the first div in the center horizontally alongside the other inline-block div

I am encountering difficulties displaying the image and CSS files from another folder in my HTML with Node.js

What are the steps to transforming shorthand CSS into longhand?

Customizing the Collapse Button CSS in Datatables

Looking for assistance with resizing SVG images

What is the best way to create a flawless circular image with a card in Bootstrap 5?

What are some alternative ways to create a text field with the same style as Material UI's without relying on the Material UI

What is the process for customizing the onmouseover property in HTML?

Tips for preventing background scrolling of a Fixed element in React

Issues arising with the functionality of CSS media queries when used in conjunction with the

Is the lack of style in PHP echo using Ajax causing issues?

What is causing the animate callback to not properly wait for the completion of the animations?

I am attempting to create a webpage with a primary center image and two additional images on either side using PHP or HTML

Relative positioning of DIV elements

Condition-based migrations with Liquibase

Create a CSS image slider with a border around the images and two navigation buttons using z-index

Difficulty arising while trying to access the following element after the designated target using JQuery

Tips for showcasing div content on a separate line rather than inline within a collapsible <a> tag

Ways to insert a hyphen "-" in an HTML form