Thymeleaf page layout issues

Question

I have a layout.html file that I want to use in every other html file, like this:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title></title>
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}"></link>
</head>
<body>
<div id="wrapper">
    <div data-th-replace="fragments/sidebars :: sidebar"></div>
    <!--  page content -->
    <div data-layout-fragment="content"></div>
</div>
<script th:src="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" type="text/javascript"></script>
<script th:src="@{/webjars/jquery/jquery.min.css}" type="text/javascript"></script>
</body>
</html>

This is my fragments/sidebars:

<div class="sidebar" data-th-fragment="sidebar">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand"> </a>
        </div>

        <!-- Top Menu Items -->
        <ul class="nav navbar-right top-nav ">
            <li><label>Welcome, User</label></li>
        </ul>

        <div class="collapse navbar-collapse navbar-ex1-collapse ">
            <ul class="nav navbar-nav side-nav">
                <li><a href="#item1"> Dashboard</a></li>
                <li><a href="#item2"> Settings</a></li>
            </ul>
        </div>
    </nav>
</div>

And this is the index file that calls for the layout and puts content on the content div:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      data-layout-decorate="~{fragments/layout}">
<head>
    <title></title>
</head>

<body>
<div id="page-wrapper" data-layout-fragment="content">
    <div class="container-fluid">
        /*some content here*
    </div>
</div>
</body>
</html>

When I run the application, I get the content defined in the last file, but it doesn't call for the layout template. The data-layout-decorate. On my pom.xml file I have the dependencies :

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

What could be wrong? Been trying to figure it out for a while, but no success.

Project structure in the resources folder:

 static
     css
     js
 templates
     fragments
         sidebars.html
         layout.html
     index.html

Thank you in advance.

EDIT: My controller is this:

@RequestMapping(value = "/",method = RequestMethod.GET)
public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView();
    modelAndView.setViewName("index");
    return modelAndView;
}

Do you get any errors or exceptions in the logfile? How do you open the page, i.e. do you have a controller? — Rüdiger Schulz
Yes. I have a controller, I Edited the post. And the page is opened fine, except that when I open the page that should take the layout.html ( the sidebar and the things that are there ). It doesn't take those. It only opens with its own content — user8753272

Rüdiger Schulz Rüdiger Schulz · Accepted Answer · 2017-10-11T10:57:56

It seems like you are using an old version of Thymeleaf in your project. Spring-Boot 1.x is shipped with Thymeleaf 2.x. However, you are using a new syntax of thymeleaf-layout (data-layout-decorate), which requires a more modern Thymeleaf as well.

You can upgrade both libraries by setting their version properties in the pom.xml like this:

<properties>
    <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
</properties>

And then your templates will render.

Also see this github-issue where the change in syntax happened.

Thymeleaf page layout issues

1 Answers