Search code examples
htmlthymeleaf

HTML Element not rendering inside Thymeleaf conditional element

This is the first time I'm using thymeleaf and I'm using Spring to return flash attributes to the login page if a user enters the wrong credentials. The error message (2 div's) are displayed but the <span class="closeBtn"> inside is not rendered.

Image of error message

Source Code

<div th:if="${message}" class="row">
    <div th:text="${message}" th:class="${'col s8 offset-s2 m6 offset-m3 alert ' + alertClass}">
        <span class="closebtn">&times;</span>
    </div>
</div>

There should be an 'x' at the right of the message. I opened the browser inspector and it just doesn't show in the HTML either.

Browser Inspector Code

<div class="row">
    <div class="col s8 offset-s2 m6 offset-m3 alert error">Incorrect username / password.</div>
    ::after
</div>
Solution

  • Basically <span class="closebtn">&times;</span> is getting overridden by th:text="${message}". Solution is to use th:utext and add <span class="closebtn">&times;</span> along with you error message.
    i.e. in properties file define property like view.error=Incorrect username/password. <span class="closebtn">&times;</span> and use it like 

    <div th:text="#{view.error}" th:class="${'col s8 offset-s2 m6 offset-m3 alert ' + alertClass}"></div>

    Hope this will help.