Problème d'affichage après migration en V4.4

[Phillou53]

Bonjour,
Besoin d’aide pour un widget « tout simple » d’info numérique complété par une led verte/orange/rouge qui m’indique rapidement si le niveau numérique est normal / à surveiller / critique. Inutile de préciser que je suis un béotien en matière de code et qu’un parmi vous m’avait aidé à mettre en œuvre ce widget il y a plusieurs années ! Je l’utilisais depuis dans un superviseur de plusieurs jeedoms (RPi3b+ en 4.3.23) et tout allait bien.

En passant en 4.4.12, ce widget m’amène à ceci.

Que faut-il corriger dans le code ci-dessous pour retrouver la mise en forme précédente ? Variante : existe-t-il un widget de tiers que ferait l’affaire ?
D’avance merci de votre aide …

<div style="width:90px;min-height:40px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <center>
        <div style="font-weight: bold;font-size : 12px;#hideCmdName#"></div>
        <div style="margin-top:13px;position:relative;float:left">
        <span style="font-size: 12px;" class="iconCmd"></span>
        </div>
      
        <div style="position:relative">
    	<span class="state" style="font-weight: bold;margin-top:13px;margin-left:5px;float:left;font-size: 12px;"></span>
      	<span style="font-size: 12px;font-weight: bold"></span>
        </div>

    </center>
<script>
      jeedom.cmd.update['#id#'] = function(_options){
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
        var Tvalue = parseFloat(_options.display_value);
        if ( Tvalue <= 33) {
            $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.tempLED/led-vt-15.png" />');
        }else if (Tvalue > 33 && Tvalue <= 66) {
           $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.tempLED/led-or-15.png" />')
        }else {
            $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.tempLED/led-rg-15.png" />');
        }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

[HermioneG]

Bonjour,

J’ai rencontré le même soucis d’affichage, même sans widget. Sous forme de tableau, il y a des marges énormes entre les icônes ce qui provoque des retours à la ligne.
Je vais suivre la discussion avec intérêt !

[Phillou53]

Merci pour votre message. A défaut d’avoir de l’aide, j’ai commencé à creuser la matière puis à mettre de l’ordre dans les commandes CSS de ce widget. Je découvre le CSS… Il y a des commandes qui n’ont rien à y faire mais qui précédemment n’avait pas d’impact. Plein de possibilités mais le résultat final s’améliore déjà. Entre ce code et la configuration avancée du tableau, le domaine est vaste !

[Bison]

Hello,

Regarde ce sujet, il y a plein de références vers des sujets identiques concernant les problématiques de tableau : Jeedom 4.4.2 - Difficulté à changer la taille des colonnes dans un design

[Phillou53]

Merci, ton message tombe bien… je suis en train de lutter avec la largeur des colonnes !

[Phillou53]

Après de multiples essais, j’y suis arrivé ! Le CSS est un domaine vaste et comme Jeedom permet de l’utiliser à divers endroits, il m’a fallu non seulement travailler sur le widget mais aussi dans la « Personnalisation avancée » ainsi que dans la « Configuration avancée » de mon tableau.
Il y a certainement des incohérences car je n’ai pas les compétences adéquates (en particulier pour la personnalisation avancée) mais pour le moment, ça marche ainsi !

Sur mon widget (modifs sur la balise center)

<div style="width:90px;min-height:40px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <center>
 		<div style="#hideCmdName#"></div>
        <div style="margin-left:0px;margin-top: 0px;float:left">
        <span class="iconCmd"></span>
        </div>
        <div style="font-weight: bold;margin-left:40px;float:right;"></div>
      	<div style="font-size: 12px;margin-top: 3px;font-weight:bold" class="state">
        </div>
    </center>
<script>
      jeedom.cmd.update['#id#'] = function(_options){
        $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
        var Tvalue = parseFloat(_options.display_value);
        if ( Tvalue <= 33) {
            $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.tempLED/led-vt-15.png" />');
        }else if (Tvalue > 33 && Tvalue <= 66) {
           $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.tempLED/led-or-15.png" />')
        }else {
            $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<img src="data/customTemplates/dashboard/cmd.info.numeric.tempLED/led-rg-15.png" />');
        }
    }
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Et sur la configuration avancée

[data-page="dashboard"] div.eqLogic-widget div.cmd-widget .content-xs {min-width:unset !important;
}

Et le résultat sur 4 tableaux de ce superviseur :

Merci à @Bison mais aussi à @Furaxworld et à @Spine qui m’avaient déjà aidé sur ce thème complexe il y a quelques temps…