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    lt a href  lorem-ipsum html  th if    condition   gt Lorem Ipsum lt  a gt        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

User · Answer

Just to add my own opinion  in case it might be useful to someone  This is what I used    lt div th class    request read    mdl-color-text--grey-800 w500         gt   lt  div gt

User · Answer

There is also th classappend    lt a href    class  baseclass  th classappend    isAdmin    adminclass   userclass  gt  lt  a gt    If isAdmin is true  then this will result in    lt a href    class  baseclass adminclass  gt  lt  a gt

User · Answer

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    lt input type  text  th field    datePlanted   class  small  th errorclass  fieldError    gt       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

User · Answer

What  Nilsi mentioned is perfectly correct  However  adminclass and user class need to be wrapped in single quotes as this might fail due to Thymeleaf looking for adminClass or userclass variables which should be strings  That said   it should be  -     lt a href    class  baseclass  th classappend    isAdmin     adminclass       userclass   gt     lt  a gt    or just    lt a href    th class    isAdmin     newclass        baseclass   gt     lt  a gt

User · Answer

Just in case someone is using Bootstrap  I was able to add more than one class   lt a href  quot  quot  class  quot baseclass quot  th classappend  quot   isAdmin      text-danger font-italic   quot  gt  lt  a gt

User · Answer

Another very similar answer is to use  equals  instead of  contains       lt li th class     strings equals pageTitle  How It Works      active       gt

User · Answer

Yet another usage of th class  same as  NewbLeech and  Charles have posted  but simplified to maximum if there is no  else  case    lt input th class     fields hasErrors  password      formFieldHasError    gt    Does not include class attribute if  fields hasErrors  password   is false

User · Answer

For this purpose and if i dont have boolean variable i use the following    lt li th class     strings contains content language  CZ      active       gt

User · Answer

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    lt a href  lorem-ipsum html  th class    isAdmin   adminclass   userclass  gt Lorem Ipsum lt  a gt

User · Answer

If you are looking to add or remove class accordingly if the url contains certain params or not  This is what you can do   lt a th href     admin home    th class     httpServletRequest requestURI contains  home       nav-link active     nav-link     gt    If the url contains  home  then active class will be added and vice versa

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

Examples related to java

Examples related to html

Examples related to css

Examples related to spring

Examples related to thymeleaf