Conditional Classes - Mendix Forum

Conditional Classes


Hi Guys,

at the moment we have a scenario where a menu item can be:

active, completed, failed


a video, a test, text.

all of these can have be both, so as example:
a failed video.
a completed test.

this is very tedious to do at the moment because we need to make a snippet for each combination.

if we could just add the classes and style them accordingly that would solve us a lot of issues.

10 answers

glad to see this being implemented in 8.14


so there is a bit of css hack that we have made to fix this with wizards
only thing is that wizards are not only visual and not clickable.

if you place all the page names in a snippet, and put a container with the class “ap_wizard active1” than the first will be active. do this for each page, and you have a wizard where you can independantly control styling.


.ap_wizard {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;

  margin: 0 30px;
  color: $text-secondary;
  text-align: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    width: auto;

$amountOfLinks: 20;
@for $i from 1 through $amountOfLinks {
  //Viewed{$i} .ap_wizardstep:nth-child(-n+#{$i}){
    color: $text-inactive;

  //Active{$i} .ap_wizardstep:nth-child(#{$i}){
    color: $brand-primary;

this is our base sass for this.


I agree, this addition would be useful for helping us to keep the pages more simple and clean, for me it is a must have.

To avoid situations like Jason has described (the wizard), the way I achieve conditional styling to date is using the next selector (element+element): 


is there a way to change the css dynamically for the entire app in mendix native with a javascript action or so?


just sharing our wizard




this cant be the most effictive way to create a wizard?


dont thank me, thank Tim ;) 

Yeah I like widgets, but when things are implemented natively, you know support will be good.

And things seem to work slightly nicer within the whole platform.


@Jason, thanks. This widget helps. I hope that this idea will be implemented soon.


Tim made this widget, which might help, still need to test it.


is there any news on when this is planned?

Im running into this a lot when creating custom Menu's

or anything that is slightly complex (wizards, menu's, notification bars)


this would also help with CSS animation :D