Thymeleaf: how to use conditionals to dynamically add/remove a CSS class

Question

By using Thymeleaf as template engine, is it possible to add/remove dynamically a CSS class to/from a simple div with the th:if clause?

Normally, I could use the conditional clause as follows:

<a href="lorem-ipsum.html" th:if="${condition}">Lorem Ipsum</a> 

We will be creating a link to the lorem ipsum page, but only if condition clause is true.

I'm looking for something different: I'd like the block to always visible, but with changeable classes according to the situation.

Solution 1

There is also th:classappend.

<a href="" class="baseclass" th:classappend="${isAdmin} ? adminclass : userclass"></a>

If isAdmin is true, then this will result in:

<a href="" class="baseclass adminclass"></a>

Solution 2

Yes, it is possible to change a CSS class dynamically according to the situation, but not with th:if. This is done with the elvis operator.

<a href="lorem-ipsum.html" th:class="${isAdmin}? adminclass : userclass">Lorem Ipsum</a> 

Solution 3

For this purpose and if i dont have boolean variable i use the following:

<li th:class="${#strings.contains(content.language,'CZ')} ? active : ''">

Solution 4

Another very similar answer is to use "equals" instead of "contains".

<li th:class="${#strings.equals(pageTitle,'How It Works')} ? active : ''">

Solution 5

If you just want to append a class in case of an error you can use th:errorclass="my-error-class" mentionned in the doc.

<input type="text" th:field="*{datePlanted}" class="small" th:errorclass="fieldError" />

Applied to a form field tag (input, select, textarea…), it will read the name of the field to be examined from any existing name or th:field attributes in the same tag, and then append the specified CSS class to the tag if such field has any associated errors

View more solutions

Comments

[Manoj Ramanan]

what about this one stackoverflow.com/questions/35530096/…

[Aboodz]

I think this should be the accepted answer. th:class replaces/rewrite your class attribute. th:classappend is what you want.

[demaniak]

Alternatively you could just inject the desired class into the model from the controller, and then have th:classappend="${theRightClass}"

[user1053510]

One more thing to remember is that you unfortunately can't have multiple th:classappend attributes. Max one is allowed. Fatal error during parsing org.xml.sax.SAXParseException: Attribute "th:classappend" was already specified for element "img".

[Drazen Bjelovuk]

Is there no th:classremove to remove a single class without affecting the others or hard coding an entire classlist in your binding xml? Or is leaving any dynamic class off and conditionally appending the only way to go?

[Kenny]

@atilkan: You could simply google Elvis operator and see it's a variant of the Ternary operator. Even wikipedia explains it in the first few lines: en.wikipedia.org/wiki/Elvis_operator

[Sineth Lakshitha]

How to do, If need to change more than 2 classes

[S. Carr]

@SinethLakshitha attacomsian.com/blog/….