Mise à jour couleur dans Widget

Bonjour à tous,
J’ai mis en place un widget assez basique faisant apparaître selon le niveau de qualité de l’air (0 à 100), la valeur au milieu d’un cercle rouge, orange, jaune ou vert.

Voilà le code pour une des classes (valeur dans cercle jaune) :

<style> .my-value-style { color: black; font-weight: bold; font-size: 15pt; margin: 0; } .cercle { width: 30px; height: 30px; border-radius: 50%; background-color: yellow; display: flex; justify-content: center; align-items: center; } </style> <div class="cercle"> <span class="my-value-style">#value#</span> </div>

Cela marche très bien lorsque je visionne le résultat sur les dashboards pour les deux équipements auxquels il s’applique (pas dans la même pièce). C’est vert dans l’un et jaune dans l’autre, en fonction des valeurs.

Par contre sur le design qui centralise (et où on voit les deux sur le même écran / vue), malgré les valeurs différentes (et classes), seule une couleur est présente pour les deux (et donc une est fausse).

Voyez-vous d’où vient problème ?

Salut @jscl32
dans le navigateur tu as l’inspecteur de code en appuyant sur ‹ F12 › puis à l’aide du sélecteur d’objet tu peux regarder le comportement et la priorité de tes classes.
image

J’ai çà sur le design : pastilles de la même couleur, alors que 2 classes différentes
image
et çà sur le dashboard de l’équipement à 40
image

quant à l’inspecteur de code, je n’arrive pas à analyser le contenu (cela dépasse mes compétences).

Oui je comprends mais ca va être compliquer sans l’inspecteur…

Bonjour,

Peux-tu partager le code du widget dans sa totalité, sinon impossible de t’aider avec si peut d’infos.

C’est un simple widget générique info numérique multistate avec 4 classes (test).
Le code mis dans mon message correspond au code mis dans une des zones « Résultats Thème Light ».
Il est répété pour les autres zones avec une couleur différente.
Je n’ ai rien écrit d’autre.

Ok donc c’est tout a fait normal ! tes « class » css s’appellent pareil !
Quand tes widgets sont sur la même page les class (.cercle …) sont chargées 2 fois. et donc c’est la dernière qui est chargée qui est prise en compte.

Ok je comprends.
Et comment on le solutionne ?
Est ce d’ailleurs possible dans un widget générique ?

Je fais un cercle1 cercle 2 … C’est çà ?
Un différent par classe

Rajoute le tag #id#, cela rendra chaque class et élément unique :

<style> .my-value-style#id# { color: black; font-weight: bold; font-size: 15pt; margin: 0; } .cercle#id# { width: 30px; height: 30px; border-radius: 50%; background-color: yellow; display: flex; justify-content: center; align-items: center; } </style> <div class="cercle#id#"> <span class="my-value-style#id#">#value#</span> </div>

Edit :
ou alors tu te dispense des class, et tu joue avec les styles directement dans tes éléments :

<div style="color: black; font-weight: bold; font-size: 15pt; margin: 0;"> <span style="width: 30px; height: 30px; border-radius: 50%; background-color: yellow; display: flex; justify-content: center; align-items: center;">#value#</span></div>

Ok je vois. Je vais tester.

La 1ere solution marche impec.
Merci

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.