Include header and footer using Spring boot and thymeleaf on html file on hierarchical folder append hierarchy on the CSS link on head tag?

Question

I have include the header and footer as fragments for the html using Spring Boot and Thymeleaf. The header and footer works fine for the index.html but doesn't work for the other *.html pages which are maintained on the hierarchical folder. So, the urls for CSS and other Script linked in the html are changed due to hierarchical urls.

For example:

<-- header.html -->
<head th:fragment="header">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title th:text="${title}"></title>
    <link rel="icon" type="image/x-icon" th:href="@{images/favicon.png}" />
    <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" /> 
    <link rel="stylesheet" type="text/css" th:href="@{css/style.css}" />
</head>

<-- footer.html -->
<div th:fragment="footer">
    <footer class="footer">
        <div class="container">
            <p class="text-muted">&copy; 2017 | Attendance</p>
        </div>
    </footer>
    <script type="text/javascript"
    src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</div>

<-- index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head lang="en" th:include="fragments/header :: header">
</head>
<body>
    <div lang="en" th:include="fragments/navigation :: navigation"></div>

    <div class="container">
         <div class="jumbotron text-center">
            <h1 th:text="'Welcome To ' + ${name}"></h1>
        </div>
    </div>

    <div lang="en" th:include="fragments/footer :: footer"></div>
 </body>
 </html>

<-- edit.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en" th:include="fragments/header :: header">
</head>
<body>
    <div lang="en" th:include="fragments/navigation :: navigation"></div>

    <div class="container" id="userDiv">
    <h3>User Form</h3>
    <hr></hr>
    <form id="userform" class="col-xs-12 col-sm-4" role="form"
        th:action="@{/user/update}" method="post"
        enctype="multipart/form-data" th:object="${useredit}">
        <div class="form-group">
            <label for="firstname">First Name</label> <input type="text"
                class="form-control" id="firstname" name="firstname"
                th:field="${useredit.firstname}" placeholder="First Name" />
        </div>


        <div>
            <input type="hidden" class="form-control" id="field" name="field"
                th:field="${useredit.id}" placeholder="Id" />
            <p>
                <button type="submit" class="btn btn-default">Save</button>
            </p>
        </div>
    </form>
    </div>

    <div lang="en" th:include="fragments/footer :: footer"></div>
 </body>
</html>

I have this method on controller, its url is "http://localhost:8080/user/edit/1". And the CSS urls must be "http://localhost:8080/css/style.css".

@RequestMapping(value = "/user/edit/{id}", method = RequestMethod.GET)
public String useredit(Model model, @PathVariable long id) {
    model.addAttribute("title", "Attendance | User");
    model.addAttribute("user", new User());
    model.addAttribute("useredit", userModel.findOne(id));

    return "/user/edit";
}

Instead of the "http://localhost:8080/css/style.css" the browser returns url as "http://localhost:8080/user/edit/css/style.css". So, the browser cannot find the css file. But works for the index.html file which is not inside any hierarchical folder.

Please help me.

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

Looks like a problem with relative versus absolute path to me.

In your header and footer include, you need to refer to the CSS file by its absolute path from the root, /css/style.css and include the th:href attribute as well, e.g. th:href="@{/css/style.css}"

If I recall correctly, you may also need a config file with your Thymeleaf setup that specifies where the static files are served from. See also Loading static resources with Spring Boot and Thymeleaf

edited May 23 '17 at 12:32

Community

1
1

answered Mar 27 '17 at 10:50

Yvonne Aburrow

2,602
1
17
47

No thats not the problem, when i include the header.html to the other html pages the linked urls are appended with the hierarchy of the pages. For example: the url is given as "http://localhost:8080/css/style.css" to the /index.html but the browser returns url as "http://localhost:8080/user/edit/css/style.css" for the /user/edit/{id}. – Kabindra Shrestha Mar 27 '17 at 11:02
can't see your example, can you add it to the OP? – Yvonne Aburrow Mar 27 '17 at 11:04
Please see the question again, i have given certain part of codes as an example. Help me! – Kabindra Shrestha Mar 27 '17 at 11:33
1

yes, so like I said, your code has a relative path to the CSS, but you need an absolute path, like this `` – Yvonne Aburrow Mar 27 '17 at 11:38

Include header and footer using Spring boot and thymeleaf on html file on hierarchical folder append hierarchy on the CSS link on head tag?

1 Answers1