Widget core - aligner verticalement icône et texte

Utilisation du core de Jeedom Widgets
1

Hello,
Je découvre doucement l’utilisation des widgets et j’ai créé plusieurs en Info/Numérique/Multistate qui fonctionne comme je le souhaite (changement couleur de l’icône selon valeur) mais il me reste un obstacle : je n’arrive pas à centrer verticalement le texte (value+ unité) avec l’icône.
Voici ce que ça donne :
Screenshot_20230712-121903~2
Screenshot_20230712-122410

Et le code que j’ai entré :

<i class='icon jeedom-thermo-moyen icon_orange'></i><span style="font-size:15px!important; vertical-align:middle!important;">&nbsp#value##unite#

Une idée?

2

un tableau avec
style cases vertical-align:middle;text-align:center ?

(en attendant la V4.4 qui propose l’option)

3

Je vais tester ça. Je déduis de ta dernière phrase qu’il n’y a pas de manière plus simple dans la version actuelle du core.

4

j’ai pas dis ça :innocent:

5

Bon bah ça marche pas :frowning: . J’ai changé la disposition de la tuile en tableau et copier le style que tu proposes, et ça ne change rien…

6

Bonsoir,

Si tu passe ton span en position: absolute; et jouer sur le line-height :

<i class='icon jeedom-thermo-moyen icon_orange'></i><span style="font-size: 16px!important;position: absolute;line-height: 24px;">&nbsp#value##unite#</span>

1 « J'aime »
7

Ah yes y a du mieux, merci !
Mantenant reste à voir comment éviter le retour à la ligne… line-width ? center left ?

2023-07-13 20_11_06-Window

8

force un width:50px; dans le span, mais c’est de la bidouille, la totalité du widget ne sera plus centré a la tuile.

9

J’ai réussi à faire ça en ajoutant dans le widget :

width:70px;text-align:left"

Screenshot_20230714-102627

En fait l’icône est centrée mais pas l’ensemble « icône+texte ».

En passant sur un widget tableau avec dans le style de la case ça :

position:absolute;left:20px

Ça donne ça
Screenshot_20230714-103018

Je crois que je vais m’en contenter :grin: