Mobile App Framework7 > Does dmx-class: work?

Mobile Apps
#1

Hi everybody,
I’m wondering if dmx-class: work for Mobile App Framework7?

I added in style.css the following class:

.statutAATTRIBUER { 
color: #4cd964;
}
.statutENCOURS {
  color: #ffcc00;
}
.statutPROGRAMMEE {
  color: #2196f3;
}

then my code

<span dmx-class:statutENCOURS="statut_intervention==2" dmx-class:statutAATTRIBUER="statut_intervention==4" dmx-class:statutPROGRAMMEE="statut_intervention==36">| st:{{statut_intervention}}</span>

And the view result, the span element is not styled

Capture d’écran 2023-03-15 à 15.56.40
Capture d’écran 2023-03-15 à 15.56.40904×1114 29.5 KB

Thanks

#2

Use lowercase characters for your class names. It’s not a great idea to have a class name like: .statutAATTRIBUER

Change that to .statut_aatribuer or .statut-aatribuer instead.

1 Like
#3

Keep your class names lowercase. CSS itself is case insensitive, but selectors from HTML (class and id) are case sensitive. The dmx-class attribute sets the class name in the attribute name, which in HTML is case insensitive and converted to lowercase, while the attribute value is case sensitive in HTML. This can be confusing but keeping your names lower-case will be the safest way.

1 Like
#4

lowercase

perfect -works perfectly, thanks