Verdict, sur une troisième jeedom complétement indépendante des miennes c’est pareil.
Tu dois avoir chez toi un paramètre de dev qui traine 
Sur celle-ci je suis passé en création avec l’outil widget du core.
Oui, seul paramètre renseigné, vertical à 1
ca donne ça :
Test effectué sur mon jeedom en 4.3.17.
Création d’un virtuel info :
Configuration du widget comme vous :
Le résultat :
Petite info mais qui doit avoir son importance,
Sur mon dernier test, c’est une jeedom distante donc l’affichage est lent. C’est fugace, mais je vois le widget qui commence par se mettre en bas correctement et qui bascule en haut ensuite. C’est très rapide mais j’ai réussi à le voir en rechargeant la page à 2 reprises sur XX rechargement.
Donc il y a quelque chose qui interviendrai pour le basculer, mais quoi 
Ce qui explique que l’affichage est bon en aperçu sous pimpmyjeedom, en fait ça passe en bas dés qu’il y a une valeur à traiter j’ai l’impression.
Bonjour et merci du test sagitaz,
Ca rassure et intrigue.
Sur 3 jeedom, j’ai le même résultat, je me gratte la tête sur la relation.
Merci @sagitaz pour le test 
Je me sens moins seul, ça n’est pas « que » dû à une config ou du code en local chez moi, ça écarte des pistes.
Bon, il reste à creuser la différence sur les Jeedom de @rennais35000 pour comprendre comment ça se produit.
Je viens d’exécuter un scénario qui lance un update de la valeur de la commande avec un event, ça reste affiché correctement dans mon dashboard.
et moi j’ai horreur de ne pas comprendre, je dors mal tant que je n’ai pas trouver.
C’est futil juste pour un affichage mais agaçant grrrr.
Je continue, je vais finir par remonter une jeedom de zéro pour voir.
Est ce qu’un plugin ou un autre widget pourrait influer ?
j’ai testé sur un jeedom en beta 4.4.0 et aucun soucis.
un css d’un autre widget, mais je crois que j’avais vérifié et rien trouvé sur ton Jeedom.
Tu peux tenter de le positionner seul dans un (nouvel) objet pour l’isoler au maximum, à voir.
Et si tu as toujours le problème, tu peux créer un virtuel (auquel tu associes le widget) que tu initialises depuis un event de scénario juste pour un cas de test.
Merci de tes efforts, mais avec les tests de sagitaz, on sait que c’est dans mon environnement.
Mais je sèche. Le navigateur certainement que non, j’ai testé les 3 et quand tu t’es connecté chez moi c’était ton navigateur.
J’ai aucune custo de css sur les jeedoms, juste des plugins et des widget en commun.
En isolant seul dans un Objet c’est bon
oui celui s’affichait mal, en l’isolant c’est bon
Avec l’équipement qui s’affichait mal ?
Donc, si c’est le cas, ça serait bien dû à un autre équipement qui entrerait en conflit (de css probablement)
C’est le widget multi_progress_bar qui fou le bazar, j’ai trouvé.
<!--
// Created: 2020/07/28 20:04:49
// Last Modified: 2020/07/28 20:16:14
-->
<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="content-lg#id#">
<!-- Progress bar en cercle-->
<div class="progress cercle#id# val_deux#id#">
<span class="progress-left cercle-left#id#">
<span class="progress-bar cercle-bar#id#"></span>
</span>
<span class="cercle-right#id#">
<span class="cercle-bar#id#"></span>
</span>
<div class="cercle-value">#state# #unite#</div>
</div>
<span class="cmdName#id# #hide_name#">#name_display# </span> <strong class="state"></strong>
<div class="cmdStats#id# #hide_history#">
<div class="center-block">
<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
</div>
<!--Fin progress bar en cercle -->
</div>
<div class="content-sm#id#">
<!--Progress bar horizontal -->
<div class="progress horizontale#id#">
<div class="progress-bar horizontal_bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100">
#state# #unite#
</div>
</div>
<span class="cmdName#id# #hide_name#">#name_display# </span> <strong class="state"></strong>
<div class="cmdStats#id# #hide_history#">
<div class="center-block">
<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
</div>
<!--Fin progress bar horizontale -->
</div>
<div class="content-xs#id#">
<!--Progress bar vertical -->
<div class="progress vertical">
<div class="progress-bar vertical_bar#id#" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="vertical_value">#state# #unite#</div>
</div>
</div>
<span class="cmdName#id# #hide_name#">#name_display# </span> <strong class="state"></strong>
<div class="cmdStats#id# #hide_history#">
<div class="center-block">
<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
</div>
<!--Fin progress bar vertical -->
</div>
<style>
:root {
--rouge: #f63a0f;
--orange: #f27011;
--jaune: #f2b01e;
--jaune_clair: #f2d31b;
--vert: #86e01e;
--noir: #000000;
--blanc: #ffffff;
--degresd#id#: 0deg;
--degresg#id#: 0deg;
--couleuractualisee#id#: var(--noir);
}
.cmdName#id {
font-size:1em;
font-weight:bold;
vertical-align:middle;
}
.cercle#id# {
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.cercle#id#:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.cercle#id#>span {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.cercle#id# .cercle-left#id# {
left: 0;
}
.cercle#id# .cercle-bar#id# {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.cercle#id# .cercle-left#id# .cercle-bar#id# {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.cercle#id# .cercle-right#id# {
right: 0;
}
.cercle#id# .cercle-right#id# .cercle-bar#id# {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1#id# 1.8s linear forwards;
}
.cercle#id# .cercle-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: #44484b;
font-size: 20px;
color: #fff;
line-height: 90px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.cercle#id#.val_deux#id# .cercle-bar#id# {
border-color: var(--couleuractualisee#id#);
}
.cercle#id#.val_deux#id# .cercle-left#id# .cercle-bar#id# {
animation: loading-2#id# 1.5s linear forwards 1.8s;
}
@keyframes loading-1#id# {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(var(--degresd#id#));
transform: rotate(var(--degresd#id#));
}
}
@keyframes loading-2#id# {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(var(--degresg#id#));
transform: rotate(var(--degresg#id#));
}
}
@media only screen and (max-width: 990px) {
.progress#id# {
margin-bottom: 20px;
}
}
.horizontale#id# {
border-radius: 4px;
width: 100px;
margin: 0 auto;
}
.horizontale#id# .horizontal_bar {
min-width: 2em;
background-color: var(--couleuractualisee#id#) !important;
width: 33%;
}
.vertical {
width: 70px;
min-height: 150px;
margin-right: 5px;
border-radius: 0px !important;
transform: rotate(180deg);
margin: 0.8 auto;
}
.vertical_bar#id# {
min-height: 2em;
width: 100%;
height: 0;
-webkit-transition: height 0.6s ease;
-o-transition: height 0.6s ease;
transition: height 0.6s ease;
display: flex;
background-color: var(--couleuractualisee#id#) !important;
height: #value#%;
/*hauteur a modifieir via javascript*/
}
.vertical_value {
margin: auto;
transform: rotate(180deg);
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options) {
var cmd = $('.cmd[data-cmd_id=#id#]');
var valeur = _options.display_value;
var val_affiche= valeur;
var inverser = ('#inverser#' == '') ? 1 : parseInt('#inverser#');
var type = ('#type#' !='#'+'type#') ? "#type#" :"cercle";
var unite = ('#unite#' == '') ? 'numerique' : '#unite#';
var maximum#id# = ('#maxValue#' == '') ? 100 : parseInt('#maxValue#');
var minimum = ('#minValue#' == '') ? 0 : parseInt('#minValue#');
var err = 0;
if (unite != '%') {
valeur = parseFloat(((valeur * 100) / maximum#id#)).toFixed(1);
maximum#id# = ((maximum#id#*100)/maximum#id#);
} else if (unite == "%" && (valeur < 0 || valeur > 100)) {
valeur = 0;
cmd.find('.cercle-value').empty().append('Err');
cmd.find('.horizontal_bar').empty().append('Err');
cmd.find('.vertical_value').empty().append('Err');
err = 1;
}
if (type == 'cercle' && err == 0) {
cmd.find('.content-sm#id#').hide();
cmd.find('.content-xs#id#').hide();
if (valeur >= minimum && valeur <= maximum#id#) {
if (valeur > 50) {
document.documentElement.style.setProperty('--degresd#id#', '180deg');
document.documentElement.style.setProperty('--degresg#id#', ((valeur - 50) * 3.6) + 'deg');
} else {
document.documentElement.style.setProperty('--degresd#id#', (valeur * 3.6) + 'deg');
document.documentElement.style.setProperty('--degresg#id#', '0deg');
}
}
cmd.find('.cercle-value').empty().append(val_affiche + ' #unite#');
} else if (type == "horizontal" && err == 0) {
cmd.find('.content-lg#id#').hide();
cmd.find('.content-xs#id#').hide();
if (valeur >= minimum && valeur <= maximum#id#) {
cmd.find('.horizontal_bar').attr('style', 'width: ' + valeur + '%;');
}
cmd.find('.horizontal_bar').empty().append(val_affiche + ' #unite#');
} else if (type == "vertical" && err == 0) {
cmd.find('.content-lg#id#').hide();
cmd.find('.content-sm#id#').hide();
if (valeur >= minimum && valeur <= maximum#id#) {
cmd.find('.vertical_bar#id#').attr('style', 'height: ' + valeur + '%;');
}
cmd.find('.vertical_value').empty().append(val_affiche + ' #unite#');
}
if(valeur>=((maximum#id#/5)*0) && valeur <(maximum#id#/5)) {
inverser ? document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--vert') : document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--rouge');
}else if(valeur>=(maximum#id#/5) && valeur <((maximum#id#/5)*2)) {
inverser ? document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--jaune_clair') : document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--orange');
}else if(valeur>=((maximum#id#/5)*2) && valeur <((maximum#id#/5)*3)) {
inverser ? document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--jaune') : document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--jaune');
}else if(valeur>=((maximum#id#/5)*3) && valeur <((maximum#id#/5)*4)) {
inverser ? document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--orange') : document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--jaune_clair');
}else if(valeur>=((maximum#id#/5)*4) && valeur <= maximum#id#) {
inverser ? document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--rouge') : document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--vert');
}
$('.cmd[data-cmd_id=#id#]').attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate);
}
jeedom.cmd.update['#id#']({
display_value: '#state#',
valueDate: '#valueDate#',
collectDate: '#collectDate#',
alertLevel: '#alertLevel#'
});
</script>
</div>
Parfait, tu peux tester ces modifications (non testé et corrigé en parcourant -très - rapidement le code) :
<!--Progress bar vertical -->
<div class="progress vertical#id#">
<div class="progress-bar vertical_bar#id#" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100">
<div class="vertical_value#id#">#state# #unite#</div>
</div>
</div>
.vertical#id# {
.vertical_value#id# {
cmd.find('.vertical_value#id#').empty().append('Err');
cmd.find('.vertical_value#id#').empty().append(val_affiche + ' #unite#');
Le vertical_value ne provoque pas de problème pour mon widget mais possible que ça soit mieux comme ça pour ce widget, à tester, je ne le connais pas.
Non, c’est pareil 
Avec les 5 modifications ?
Il faut remplacer ou mettre à la suite ?
<!--Progress bar vertical -->
<div class="progress vertical">
<div class="progress-bar vertical_bar#id#" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="vertical_value">#state# #unite#</div>
</div>
</div>
.vertical#id# {
.vertical_value#id# {
cmd.find('.vertical_value#id#').empty().append('Err');
cmd.find('.vertical_value#id#').empty().append(val_affiche + ' #unite#');
<span class="cmdName#id# #hide_name#">#name_display# </span> <strong class="state"></strong>
<div class="cmdStats#id# #hide_history#">
<div class="center-block">
<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
</div>
<!--Fin progress bar vertical -->
il faut rechercher le code que j’ai donné et le retrouver dans l’ancien code.
Et ensuite, tu le remplaces par ce nouveau code (juste des #id# à ajouter).
Oui j’essaie en mode boulet
Donc j’ai trouvé la séquence et ça devient :
<!--Progress bar vertical -->
.vertical#id# {
.vertical_value#id# {
cmd.find('.vertical_value#id#').empty().append('Err');
cmd.find('.vertical_value#id#').empty().append(val_affiche + ' #unite#');
<span class="cmdName#id# #hide_name#">#name_display# </span> <strong class="state"></strong>
<div class="cmdStats#id# #hide_history#">
<div class="center-block">
<span title='Min' class='tooltips'>#minHistoryValue#</span>|<span title='Moyenne' class='tooltips'>#averageHistoryValue#</span>|<span title='Max' class='tooltips'>#maxHistoryValue#</span> <i class="#tendance#"></i>
</div>
</div>
<!--Fin progress bar vertical -->