CODEWITHSUNDEEP
htmlclassthymeleaf
mikezang
mikezang

Reputation: 2489

Part of html not being rendered by thymeleaf

Using thymeleaf, I'm trying to generate the following structure:

<li class="active">
    <a href="/bootstrap/dashboard">Dashboard</a>
</li>
<li>
    <a href="#">Charts<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li><a href="/bootstrap/flot">Flot Charts</a></li>
    </ul>
</li>

I modified it as below:

<li th:each="menu : ${sideForm.menu}" th:class="${activeItem} == ${menu.item} ? 'active' : null">
    <a href="#" th:if="${#lists.isEmpty(menu.submenu)}" th:href="@{'/' + ${sideForm.parentMenu} + '/' + ${menu.item}}" th:text="#{${menu.title}}">Item</a>
    <a href="#" th:unless="${#lists.isEmpty(menu.submenu)}" th:text="#{${menu.title}}">Item<span class="fa arrow" th:class="fa arrow"></span></a>
    <ul class="nav nav-second-level" th:unless="${#lists.isEmpty(menu.submenu)}" th:class="'nav nav-second-level'">
        <li th:each="submenu : ${menu.submenu}">
            <a href="#" th:unless="${#lists.isEmpty(menu.submenu)}" th:href="@{'/' + ${sideForm.parentMenu} + '/' + ${submenu.item}}" th:text="#{${submenu.title}}">Sub Item</a>
        </li>
    </ul>
</li>

It rendered as below:

<li class="active">
    <a href="/bootstrap/dashboard">dashboard</a>
</li>
<li>
    <a href="#">Charts</a>
    <ul class="nav nav-second-level">
        <li><a href="/bootstrap/flot">Flot Charts</a></li>
    </ul>
</li>

I added "<span class="fa arrow" th:class="fa arrow"></span>", why isn't it rendered in real html? How can I fix it?

Upvotes: 0

Views: 399

Answers (1)

Alexandru Severin
Alexandru Severin

Reputation: 6228

the th:text from the <a> tag causes thymeleaf to replace its content with the given value, replacing also the span tag

<a href="#" th:unless="${#lists.isEmpty(menu.submenu)}" th:text="#{${menu.title}}">
    <!-- everything in the <a> tag will be deleted by the th:text -->
    Item     
    <span class="fa arrow" th:class="fa arrow"></span>

</a>

You should wrap the title in another html tag such as a span or th:block (th:block doesn't get rendered after being processed)

<a href="#" th:unless="${#lists.isEmpty(menu.submenu)}">
    <th:block th:text="#{${menu.title}}">Item</th:block>
    <span class="fa arrow" th:class="fa arrow"></span>
</a>

Or, with inline text:

<a href="#" th:unless="${#lists.isEmpty(menu.submenu)}" th:inline="text" >
   [[#{${menu.title}}]]
   <span class="fa arrow" th:class="fa arrow"></span>
</a>

Upvotes: 1

Related Questions