Centrer verticalement

[OUARZA]

Hello,
Suite au passage en V4.4, j’ai des petits ajustements à faire au niveau de mes visuels.
Comment dois-je m’y prendre pour centrer verticalement mes valeurs ?

J’ai tenté de mettre un vertical-align: middle; dans le tableau de l’équipement où la valeur est renseignée, mais aucun effet.
J’ai tenté de le mettre dans le widget associé à la valeur, mais aucun effet.
Widget : <div style="font-weight: bold; font-size: 40px; color: #FFFFFF; vertical-align: middle;">#value##unite#</div>

Pouvez-vous m’aider ?
Merci par avance.
Mathieu

[Spine]

Bonjour,

La case Centrer ne fonctionne pas ?

Tester avec votre widget.

[OUARZA]

Hello @Spine ,
L’option « Centrer », c’est pour un centrage horizontal, non ?

[Spine]

Non ça centre verticalement apparemment :

[OUARZA]

bah mince alors, vous avoir dérangé pour ça…
Je vais tester.

[OUARZA]

@Spine ,
ça ne marche pas :

j’ai supprimé la personnalisation que j’avais fait.

[Spine]

Vous pouvez tester sur le dashboard avant de tester sur un design ?
C’est quoi les icônes à gauche ?
Je peux voir la configuration complète du tableau ?
Désactiver la personnalisation avancée pour les tests.

[OUARZA]

Les icônes sont inscrites en dur.
Voici la configuration :

Cela donne ça avec les 2 icônes de droite.

et sans

dans mon widget pour la valeur : <div style="font-weight: bold; font-size: 40px; color: #FFFFFF;">#value##unite#</div>
dans mon widget pour le chauffage : <i class='icon mafont-heat' style="color:red;font-size:40px;"></i>
dans mon widget pour le gel : <i class='icon mafont-snowflake' style="color:skyblue;font-size:40px;"></i>

Y’a un truc étrange, regarde:

Mathieu

[Spine]

Tu as mis quoi dans les widgets chauffage et gel quand tu n’affiches pas l’icone ? Tu as laissé le champ vide ?

[OUARZA]

Hello,
Pour le chauffage :

Pour le gel :

[Spine]

Salut,

Je pense que le souci vient du champ vide, essayes de mettre une icône cachée dans le champ vide :

<i class='icon mafont-heat' style="color:red;font-size:40px; visibility: hidden;"></i>

[OUARZA]

@Spine

visibility: hidden;

Je viens de le faire sur les 2 icônes, regarde ce que ça donne, c’est pas centré verticalement.

[Spine]

Tu as mis un height: 80px; sur les icônes en dur et elles ne prennent pas en compte la case Centrer :

En supprimant le height: 80px; :

En centrant l’icone avec display: flex; align-items: center; :

[OUARZA]

Merci @Spine pour ton aide.
Voilà ce que ça donne avec la configuration suivante :

Si je comprends bien, il faut prendre en compte le centrage avec l’icône même si il n’y en a pas.
Est-ce bien cela ?
Parce que si on regarde bien, c’est pas pas un centrage parfait.

Mathieu

[Spine]

Bonjour,

@OUARZA

Si je comprends bien, il faut prendre en compte le centrage avec l’icône même si il n’y en a pas.
Est-ce bien cela ?

Si tu mets une icône dans le champ Texte d’un tableau elle ne va pas prendre les classes d’un widget core contrairement à une icone dans le champ Résultat d’un widget core et la case Centrer n’aura pas d’influence sur cette icone.
C’est donc à toi de gérer le centrage.

J’ai reproduis ta configuration le plus précisément possible avec les mêmes widgets, la même configuration de tableau et une fois les soucis de champ vide dans le widget et de centrage de l’icone en dur corrigés, tout est parfaitement aligné donc difficile de t’aider plus si je ne reproduis pas.
La seule différence que je vois c’est que tu sembles utiliser une font perso. (icon mafont-heat), peut-être essayer avec des icônes Jeedom.

[OUARZA]

Hello @Spine ,
Je comprends et tu m’as déjà beaucoup aidé et je t’en remercie.
L’aspect est maintenant très bien
Mathieu