Bonjour à tous,
J’ai migré de v4.3.x à v4.4.18 et depuis je n’arrive pas à aligner des widgets graphiques à gauche dans mes tableaux.
J’avais le même problème avec les valeurs texte numériques, mais je l’ai résolu par un petit widget qui force l’alignement à gauche avec des balises <left> dans un <div>. Malheureusement, cela ne fonctionne pas pour les graphiques.
Si j’utilise l’outil widget officiel intégré, j’obtiens un alignement vertical centré dans les cases et beaucoup d’espaces entre elles :
-
Le rendu :
-
Le code du widget :
-
La disposition tableau de mon virtuel :
Si j’utilise un widget perso (code qui marchait bien jusqu’en v4.3.x), j’obtiens également un alignement vertical centré, mais au moins je n’ai pas ces importants espaces verticaux :
-
Le rendu :
-
Le code du widget :
<div align=left style="width:150px" 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#" title="Batterie #name# #state#%">
<div class="cmdName #hide_name#">
<span id="iconCmd#id#"></span>
<!-- <span> #name_display#</span> -->
</div>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var temp;
/* calcul du pourcentage de charge par rapport à la valeur max */
temp = ( #state# * 100 ) / #maxValue#;
temp = temp.toFixed(0); // On arrondit
$('.cmd[data-cmd_uid=#uid#] .iconCmd#id#').empty(); // On vide l'affichage précédent
$('#iconCmd#id#').empty(); // On vide l'image précédente
/* On ajoute le bon affichage : */
if (temp > 75) { //piles pleines
$('#iconCmd#id#').append('<img style="display: inline;" src="montheme/icones/batterie/led_verte.png" width="15"/>');
}
if (temp > 50 && temp <= 75) { //piles moitié pleines
$('#iconCmd#id#').append('<img style="display: inline;" src="montheme/icones/batterie/led_bleue.png" width="15"/>');
}
if (temp > 40 && temp <= 50) { //piles faibles
$('#iconCmd#id#').append('<img style="display: inline;" src="montheme/icones/batterie/led_jaune.png" width="15"/>');
}
if (temp > 30 && temp <= 40) {
$('#iconCmd#id#').append('<img style="display: inline;" src="montheme/icones/batterie/led_orange.png" width="15"/>');
}
if (temp > 20 && temp <= 30) {
$('#iconCmd#id#').append('<img style="display: inline;" src="montheme/icones/batterie/led_rouge.png" width="15"/>');
}
if (temp <= 20) { //piles vides
$('#iconCmd#id#').append('<img style="display: inline;" src="montheme/icones/batterie/led_rouge_vide.gif" width="15"/>');
}
$('#iconCmd#id#').append('<span style="display: inline;"> #name#</span>');
$('.cmd[data-cmd_id=#id#]').attr('title','#name# : #state# #unite#<br/>Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
<!-- début exemple
//<script>
// Jeedom.cmd.update['#id#'] = function(_options){
// $('.cmd[data-cmd_id=#id#]').attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
// $('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value +' #unite#');
// }
// Jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
//</script>
fin exemple -->
</div>
- La disposition tableau de mon virtuel :
Avant, avec ce même widget (code de je ne sais plus qui sur ce même forum, désolé), cela fonctionnait parfaitement, j’obtenais un alignement à gauche sans aucun soucis.
Là j’ai essayé de forcer avec toutes les balises que j’ai pu trouver dans les aides de ce forum (float, left, text-align:left, etc.) mais sans succès 
Est-ce que quelqu’un ayant plus de connaissances que moi en HTML et CSS (ce n’est pas dur à trouver, LOL), saurait m’aider SVP ?
Nota : ce n’est pas la faute des icônes qui auraient du blanc tout autour, elles font 15 pixels de côté et sont ajustées au dessin.