How to choose children elements position inside a Thymeleaf's fragment?

Question

How to choose children elements position inside a Thymeleaf's fragment?

2.3k Views Asked by Natanael At 26 April 2025 at 21:43

I would like to choose the position of the children elements inside a fragment using Thymeleaf like in the following examples.

fragments.html:

<div th:fragment="awesomeFragment">
     Some Text
     <div><!-- children must be here --></div>
</div>

view.html:

<div th:replace="fragments :: awesomeFragment">
     <a href="www.google.com"/>
</div>

Expected output:

<div>
     Some Text
     <div><a href="www.google.com"/></div>
</div>

Is it possible? If so, how could I do this?

Original Q&A

There are 2 best solutions below

Natanael On 09 April 2016 at 20:27

Edit:

The following question is solved! It can be done using Includes and Fragments.

Sam, although your answer is satsfactory to solve part of my problems I still have an doubt.

This method replaces an element and all of its ancestors with those specified in the layout and preserves the content of the original element.

It works well for layouts, but how about replace the content of a fragment only?

Lets suppose I have the following scenario. I'm developing a library of bootstrap widgets. Some widgets, like navbar have internal containers and this containers will contain other elements. Ex.:

fragments/navbar.html

<!-- navbar --> 
<div th:fragment="navbar" class="navbar">
    <div class="navbar-inner">        
        <a class="brand" href="#">Awesome Thymeleaf Navbar</a>
        <ul class="nav">
            <!-- children goes here -->                
        </ul>
    </div>
</div>
<div>

Inside index.html

This is my Navbar:
<div th:replace="fragments/navbar :: navbar">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</div>

And get the following output:

    This is my Navbar:    
    <!-- navbar --> 
    <div th:fragment="navbar" class="navbar">
            <div class="navbar-inner">        
                <a class="brand" href="#">Awesome Thymeleaf Navbar</a>
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
        </div>
    <div>

Do you understand the difference? They way you shown to me replaces the element and its ancestors, but preserves the content. The result is the whole document root being replaced.

In some situations I need to replace just the element being replace. I need to keep its parents and contents too.

As I said it's solved. Here goes an example of how to implement this:

layouts/navbar.html:

<!DOCTYPE html>
<html>
<body>       
    <div layout:fragment="navbar" class="navbar">
        <div class="navbar-inner">        
            <a class="brand" href="#">Navbar</a>
            <ul class="nav" layout:fragment="navbar-content">
                <!-- children goes here -->                
            </ul>
        </div>
    </div>  
</body>
</html>`

document.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Home</title>
    </head>
    <body>This is my Navbar:
        <div layout:include="layouts/navbar :: navbar" th:remove="tag">
            <ul layout:fragment="navbar-content">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </div>
    </body> 
</html>

**sanluck** · Accepted Answer

You can do it via layouts.
Use Thymeleaf Layout Dialect for this.
(If you using Spring Boot it's already turned on!)

The layout will be presented in this form :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <title></title>
</head>
<body>
    <header>
        Some text
    </header>
    <div layout:fragment="content">
        <p>Page content goes here</p>
    </div>
</body>

And you page will be:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" 
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="base/test">
<head>
    <title></title>
</head>
<body>
    <div layout:fragment="content">
        <a href="www.test.com">Test.com</a>
    </div>
</body>

I tried it in my Thymeleaf test project. The source code of the page in browser turned out like you wanted :

How to choose children elements position inside a Thymeleaf's fragment?

There are 2 best solutions below

Related Questions in JAVA

Related Questions in SPRING-MVC

Related Questions in MODEL-VIEW-CONTROLLER

Related Questions in THYMELEAF

Related Questions in PAGE-FRAGMENTS

Trending Questions

Popular # Hahtags

Popular Questions