Conditional Classes - Mendix Forum

Conditional Classes

43

Hi Guys,

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

active, completed, failed

and

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.

asked
10 answers

glad to see this being implemented in 8.14

https://docs.mendix.com/refguide/common-widget-properties#dynamicclasses

Created

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;
}

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



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

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

this is our base sass for this.

Created

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): https://www.w3schools.com/cssref/sel_element_pluss.asp 

Created

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

Created

just sharing our wizard

 

 

 

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

Created

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.

Created

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

Created

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

https://appstore.home.mendix.com/link/app/108838/

Created

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)

Created

this would also help with CSS animation :D 

Created