Centrer du texte dans un tableau (colspan?)

Interfaces Portail web classique (Desktop)
128

Non ce n’est pas le cas, c’est le plugin JPI qui est obsolète, fais des appels dans tous les sens.
Pas JPI en tant que tel qui se contente d’afficher. JPI est un APK et tu t’interfaces avec lui par script, le framework SC de @dJuL ou bien l’ancien plugin JPI Plugin qui faisait « sauter » le cron et Jeedom.

Pour ma part, je ne l’utilise plus depuis quelques mois car j’ai tout migré sur script.
Par contre, en y réfléchissant, je me demande si ce n’est pas le fait que mes infos « bougent » en taille et autres et du coup, le tableau change légèrement de taille au sein d’une cellule. S’il change de taille, le colspan ne s’applique plus et saute.

Tu vois l’idée ? Je ne sais pas si tu peux reproduire ?

129

je ne sais pas trop comment reproduire.

faudrait que tu fasses un clic droit sur ton design. Menu inspecter

et faudrait cliquer la dessus (la petite flèche) :
image

Et ensuite, cliquer sur ta case de tableau :

  • lorsque le colspan/rowspan fonctionne
  • lorsque le colspan/rowspan ne fonctionne plus

et me montrer le code HTML pour chaque situation.
On verra ainsi si le colspan saute vraiment ou pas.

130

OK, je m’en occupe dans le week-end.

1 « J'aime »
131

En y réfléchissant, je vois bien que cela ne touche que « certains » éléments de mon design.

Par exemple, je clique sur un interrupteur ou autres, il ne se passe rien ! Le titre reste bien fusionné sur les 5 ou 6 cases en long.

Par contre, certains bougent soit durant la vie, soit si j’appuie.

Exemple :

<div class="eqLogic eqLogic-widget allowResize allowReorderCmd allowLayout eqLogic_layout_table jeedomAlreadyPosition noResize hideEqLogicName context-menu-disabled" data-eqtype="virtual" data-eqlogic_id="1915" data-eqlogic_uid="eqLogic1915__814284044__" data-version="dashboard" data-translate-category="" data-category="" data-tags="" style="width: 142px; height: 157px;" data-plan_id="3785" data-zoom="1">
	<center class="widget-name">
		<span class="warning tooltipstered">
			<i class=""></i>
		</span>
		<span class="cmd refresh pull-right cursor" data-cmd_id="21148">
			<i class="fas fa-sync"></i>
		</span>
		<span class="reportModeVisible">Ouvrants <span class="object_name">Panel</span></span>
		<a href="#" class="reportModeHidden">Ouvrants <span class="object_name">Panel</span></a>
	</center>
	<div class="verticalAlign">
		<center>
			<table style="width:140px;" class="tableCmd" data-line="3" data-column="2"><tbody><tr><td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1" colspan="2"><center>Ouvrants &amp; Accès</center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1"><center><!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id="button-21164" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21164'});" data-type="action" data-cmd_id="21164" data-cmd_uid="cmd21164__814284044__">

   <div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 20px;">
     <i id="icon-21164" class="jeedom-portail_ferme" style="line-height: 47px; color: ghostwhite;"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('53') ? parseFloat('53'):60;
     var borderSize = is_numeric('3') ? parseFloat('3'):3;
     var iconSize = is_numeric('20') ? parseFloat('20'):30;
     var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";

     $("#button-21164 .button").css("border", borderSize+"px solid "+color);
     $("#button-21164 .button").css("border-radius", buttonSize+"px");
     $("#button-21164 .button").css("color", color);
     $("#button-21164 .button").css("width", buttonSize+"px");
     $("#button-21164 .button").css("height", buttonSize+"px");
     $("#button-21164 .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("line-height",lineheight+"px");
     $("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("color",color);

     var type = ('jeedom-portail_ferme' !='#'+'type#') ? "jeedom-portail_ferme":"fa";
     var icon = (''!='#'+'icone#') ? "" : "fa-lock";
     $("#icon-21164").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-21164").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-21164").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="2"><center><!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id="button-21165" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21165'});" data-type="action" data-cmd_id="21165" data-cmd_uid="cmd21165__814284044__">

   <div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
     <i id="icon-21165" class="jeedomapp-garage-ferme" style="line-height: 47px; color: ghostwhite;"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('53') ? parseFloat('53'):60;
     var borderSize = is_numeric('3') ? parseFloat('3'):3;
     var iconSize = is_numeric('36') ? parseFloat('36'):30;
     var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";

     $("#button-21165 .button").css("border", borderSize+"px solid "+color);
     $("#button-21165 .button").css("border-radius", buttonSize+"px");
     $("#button-21165 .button").css("color", color);
     $("#button-21165 .button").css("width", buttonSize+"px");
     $("#button-21165 .button").css("height", buttonSize+"px");
     $("#button-21165 .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("line-height",lineheight+"px");
     $("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("color",color);

     var type = ('jeedomapp-garage-ferme' !='#'+'type#') ? "jeedomapp-garage-ferme":"fa";
     var icon = (''!='#'+'icone#') ? "" : "fa-lock";
     $("#icon-21165").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-21165").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-21165").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script></center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="1"><center><!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id="button-21168" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21168'});" data-type="action" data-cmd_id="21168" data-cmd_uid="cmd21168__814284044__">

   <div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
     <i id="icon-21168" class="mdi-window-shutter-open Mdi" style="line-height: 47px; color: ghostwhite;"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('53') ? parseFloat('53'):60;
     var borderSize = is_numeric('3') ? parseFloat('3'):3;
     var iconSize = is_numeric('36') ? parseFloat('36'):30;
     var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";

     $("#button-21168 .button").css("border", borderSize+"px solid "+color);
     $("#button-21168 .button").css("border-radius", buttonSize+"px");
     $("#button-21168 .button").css("color", color);
     $("#button-21168 .button").css("width", buttonSize+"px");
     $("#button-21168 .button").css("height", buttonSize+"px");
     $("#button-21168 .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("line-height",lineheight+"px");
     $("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("color",color);

     var type = ('mdi-window-shutter-open' !='#'+'type#') ? "mdi-window-shutter-open":"fa";
     var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
     $("#icon-21168").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-21168").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-21168").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="2"><center><!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id="button-21166" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21166'});" data-type="action" data-cmd_id="21166" data-cmd_uid="cmd21166__814284044__">

   <div class="button" style="border: 2px solid rgb(172, 172, 172); border-radius: 45px; color: rgb(172, 172, 172); width: 45px; height: 45px; font-size: 35px;">
     <i id="icon-21166" class="mdi-car-cog Mdi" style="line-height: 41px; color: rgb(172, 172, 172);"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('45') ? parseFloat('45'):60;
     var borderSize = is_numeric('2') ? parseFloat('2'):3;
     var iconSize = is_numeric('35') ? parseFloat('35'):30;
     var color = ('#acacac' !='#'+'couleur#') ? "#acacac":"white";

     $("#button-21166 .button").css("border", borderSize+"px solid "+color);
     $("#button-21166 .button").css("border-radius", buttonSize+"px");
     $("#button-21166 .button").css("color", color);
     $("#button-21166 .button").css("width", buttonSize+"px");
     $("#button-21166 .button").css("height", buttonSize+"px");
     $("#button-21166 .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("line-height",lineheight+"px");
     $("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("color",color);

     var type = ('mdi-car-cog' !='#'+'type#') ? "mdi-car-cog":"fa";
     var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
     $("#icon-21166").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-21166").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-21166").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script></center></td></tr></tbody></table>
		</center>
	</div>
	<script>
		if ('21148' != ''){
			$('.eqLogic[data-eqLogic_uid=eqLogic1915__814284044__] .refresh').on('click', function () {
				jeedom.cmd.execute({id: '21148'});
			});
		}else{
			$('.eqLogic[data-eqLogic_uid=eqLogic1915__814284044__] .refresh').remove();
		}
	</script>
</div>

Si j’appuie :

<div class="eqLogic eqLogic-widget allowResize allowReorderCmd allowLayout eqLogic_layout_table jeedomAlreadyPosition noResize hideEqLogicName context-menu-disabled" data-eqtype="virtual" data-eqlogic_id="1915" data-eqlogic_uid="eqLogic1915__1777855253__" data-version="dashboard" data-translate-category="" data-category="" data-tags="" style="width: 142px; height: 157px;" data-plan_id="3785" data-zoom="1"><center class="widget-name">
		<span class="warning tooltipstered">
			<i class=""></i>
		</span>
		<span class="cmd refresh pull-right cursor" data-cmd_id="21148">
			<i class="fas fa-sync"></i>
		</span>
		<span class="reportModeVisible">Ouvrants <span class="object_name">Panel</span></span>
		<a href="#" class="reportModeHidden">Ouvrants <span class="object_name">Panel</span></a>
	</center><div class="verticalAlign">
		<center>
			<table style="width:140px;" class="tableCmd" data-line="3" data-column="2"><tbody><tr><td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1"><center>Ouvrants &amp; Accès</center></td><td class="tableCmdcss" style="font-family:Rubik-light;" data-line="1" data-column="2"><center></center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1"><center><!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id="button-21164" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21164'});" data-type="action" data-cmd_id="21164" data-cmd_uid="cmd21164__1777855253__">

   <div class="button" style="border: 3px solid rgb(218, 48, 55); border-radius: 53px; color: rgb(218, 48, 55); width: 53px; height: 53px; font-size: 20px;">
     <i id="icon-21164" class="jeedom-portail_ouvert" style="line-height: 47px; color: rgb(218, 48, 55);"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('53') ? parseFloat('53'):60;
     var borderSize = is_numeric('3') ? parseFloat('3'):3;
     var iconSize = is_numeric('20') ? parseFloat('20'):30;
     var color = ('#da3037' !='#'+'couleur#') ? "#da3037":"white";

     $("#button-21164 .button").css("border", borderSize+"px solid "+color);
     $("#button-21164 .button").css("border-radius", buttonSize+"px");
     $("#button-21164 .button").css("color", color);
     $("#button-21164 .button").css("width", buttonSize+"px");
     $("#button-21164 .button").css("height", buttonSize+"px");
     $("#button-21164 .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("line-height",lineheight+"px");
     $("#button-21164 .button i.fa, #button-21164 .button i.fas, #button-21164 .button i.fab").css("color",color);

     var type = ('jeedom-portail_ouvert' !='#'+'type#') ? "jeedom-portail_ouvert":"fa";
     var icon = (''!='#'+'icone#') ? "" : "fa-lock";
     $("#icon-21164").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-21164").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-21164").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="2"><center><!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id="button-21165" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21165'});" data-type="action" data-cmd_id="21165" data-cmd_uid="cmd21165__1777855253__">

   <div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
     <i id="icon-21165" class="jeedomapp-garage-ferme" style="line-height: 47px; color: ghostwhite;"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('53') ? parseFloat('53'):60;
     var borderSize = is_numeric('3') ? parseFloat('3'):3;
     var iconSize = is_numeric('36') ? parseFloat('36'):30;
     var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";

     $("#button-21165 .button").css("border", borderSize+"px solid "+color);
     $("#button-21165 .button").css("border-radius", buttonSize+"px");
     $("#button-21165 .button").css("color", color);
     $("#button-21165 .button").css("width", buttonSize+"px");
     $("#button-21165 .button").css("height", buttonSize+"px");
     $("#button-21165 .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("line-height",lineheight+"px");
     $("#button-21165 .button i.fa, #button-21165 .button i.fas, #button-21165 .button i.fab").css("color",color);

     var type = ('jeedomapp-garage-ferme' !='#'+'type#') ? "jeedomapp-garage-ferme":"fa";
     var icon = (''!='#'+'icone#') ? "" : "fa-lock";
     $("#icon-21165").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-21165").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-21165").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script></center></td></tr><tr><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="1"><center><!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id="button-21168" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21168'});" data-type="action" data-cmd_id="21168" data-cmd_uid="cmd21168__1777855253__">

   <div class="button" style="border: 3px solid ghostwhite; border-radius: 53px; color: ghostwhite; width: 53px; height: 53px; font-size: 36px;">
     <i id="icon-21168" class="mdi-window-shutter-open Mdi" style="line-height: 47px; color: ghostwhite;"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('53') ? parseFloat('53'):60;
     var borderSize = is_numeric('3') ? parseFloat('3'):3;
     var iconSize = is_numeric('36') ? parseFloat('36'):30;
     var color = ('ghostwhite' !='#'+'couleur#') ? "ghostwhite":"white";

     $("#button-21168 .button").css("border", borderSize+"px solid "+color);
     $("#button-21168 .button").css("border-radius", buttonSize+"px");
     $("#button-21168 .button").css("color", color);
     $("#button-21168 .button").css("width", buttonSize+"px");
     $("#button-21168 .button").css("height", buttonSize+"px");
     $("#button-21168 .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("line-height",lineheight+"px");
     $("#button-21168 .button i.fa, #button-21168 .button i.fas, #button-21168 .button i.fab").css("color",color);

     var type = ('mdi-window-shutter-open' !='#'+'type#') ? "mdi-window-shutter-open":"fa";
     var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
     $("#icon-21168").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-21168").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-21168").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script></center></td><td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="3" data-column="2"><center><!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id="button-21166" class="cursor cmd tooltips cmd-widget container-fluid tooltipstered" onclick="jeedom.cmd.execute({id: '21166'});" data-type="action" data-cmd_id="21166" data-cmd_uid="cmd21166__1777855253__">

   <div class="button" style="border: 2px solid rgb(172, 172, 172); border-radius: 45px; color: rgb(172, 172, 172); width: 45px; height: 45px; font-size: 35px;">
     <i id="icon-21166" class="mdi-car-cog Mdi" style="line-height: 41px; color: rgb(172, 172, 172);"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('45') ? parseFloat('45'):60;
     var borderSize = is_numeric('2') ? parseFloat('2'):3;
     var iconSize = is_numeric('35') ? parseFloat('35'):30;
     var color = ('#acacac' !='#'+'couleur#') ? "#acacac":"white";

     $("#button-21166 .button").css("border", borderSize+"px solid "+color);
     $("#button-21166 .button").css("border-radius", buttonSize+"px");
     $("#button-21166 .button").css("color", color);
     $("#button-21166 .button").css("width", buttonSize+"px");
     $("#button-21166 .button").css("height", buttonSize+"px");
     $("#button-21166 .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("line-height",lineheight+"px");
     $("#button-21166 .button i.fa, #button-21166 .button i.fas, #button-21166 .button i.fab").css("color",color);

     var type = ('mdi-car-cog' !='#'+'type#') ? "mdi-car-cog":"fa";
     var icon = ('Mdi'!='#'+'icone#') ? "Mdi" : "fa-lock";
     $("#icon-21166").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-21166").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-21166").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script></center></td></tr></tbody></table>
		</center>
	</div><script>
		if ('21148' != ''){
			$('.eqLogic[data-eqLogic_uid=eqLogic1915__1777855253__] .refresh').on('click', function () {
				jeedom.cmd.execute({id: '21148'});
			});
		}else{
			$('.eqLogic[data-eqLogic_uid=eqLogic1915__1777855253__] .refresh').remove();
		}
	</script></div>

Et reste comme ça ensuite, si le bouton revient à son état.

J’ai le même souci sur le tableau de suivi de confort/usage.

Un élément sur la taille des tableaux ?

132

Hello,

je viens de comparer les 2 codes.
En effet, on voit que le tableau saute :

<table style="width:140px;" class="tableCmd" data-line="3" data-column="2">
<tbody>
<tr>
<td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1" colspan="2">
<center>
Ouvrants &amp; Accès
</center>
</td>
</tr><tr>
<td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1">
<center><!--

et

<table style="width:140px;" class="tableCmd" data-line="3" data-column="2">
<tbody>
<tr>
<td class="tableCmdcss" style="font-family:Rubik-light;background-color:ghostwhite;color: black;font-size:13px;column-span:all;text-align:center;" data-line="1" data-column="1">
<center>
Ouvrants &amp; Accès
</center>
</td>
<td class="tableCmdcss" style="font-family:Rubik-light;" data-line="1" data-column="2">
<center></center>
</td>
</tr>
<tr>
<td class="tableCmdcss" style="font-family:Rubik-light;text-align:center;vertical-align:middle;width:70px;height:62px;" data-line="2" data-column="1"><center><!--

Si on regarde les 2 codes :
On voit que le colspan=2 a sauté dans le deuxième (juste au dessus de center … au bout de la ligne).

as tu des scripts dans ta personnalisation avancée javascript?
je me demande ce que la classe « tableCmdcss » fait.

j’ai regardé le lien (dans ton code) pour le multi-icone.
je ne vois rien qui pourrait provoquer cela.
Je me souviens plus, as tu gardé la double flèche dans ton design ?
image

si tu cliques dessus? cela fait aussi sauter la mise en page?

On va trouver. ça doit pas être grand chose. Le plus dur, c’est de trouver la cause.

133

Non je n’ai pas gardé le refresh sur le virtuel affiché (dans le sens que je n’affiche pas le titre mais il est présent sur le dashboard). J’ai un CSS personnalisé pour gérer la bordure et le titre du tableau.

D’ailleurs quand cela « pête » même si je rappuie dessus, il ne se passe rien.

Sinon pour ne pas avoir le titre, je coche la case masquer le nom côté design :

2001×1000 166 KB

Tu remarqueras que j’avais le code de bordure dans CSS avancé et non dans bordure. Je ne me souviens plus ce qui m’avait conduit à le mettre ça lors de mes essais. Je l’ai basculé dans bordure en changeant l’épaisseur à 1px pour avoir le même résultat graphique … et sans étonnement j’ai toujours le souci.

Avec

border:2px;border-style:solid;border-color:ghostwhite;vertical-align:middle;

Côté personnalisation avancée :

// Permet de fusionner les colonnes d'un tableau pour n'avoir qu'une colonne dans un tableau à plusieurs colonnes

function addColspan(Tabobjets) {
  		
  		//console.log('fonction');
  		Tabobjets.each(function(objet) {
          
          if ($(this).css("column-span") != undefined)
          {
            	//console.log('column-span');
           		if ($(this).css("column-span") === 'all')
          		{
           			//console.log('column-span== all');
                    var nbtd = $(this).siblings().length + 1;
                  	$($(this).siblings()).remove();
                    $(this).attr('colspan',nbtd);        
          		} 
            	else
                {
                  //debugger
                  var nb = $(this).css("column-span");
                  //alert(nb);
                }            
          }
          
          if ($(this).css("grid-column-start") != undefined)
          {
            	
                var nb = $(this).css("grid-column-start");
            	
            	if ($(this).css("grid-column-start") != 'auto' && $(this).css("grid-column-start") != '')
          		{
                  
                  	for(let i=0;i<nb;i++)
                    {
                      //debugger
                      if ($(this).next() != undefined)
                      {
                      		$($(this).next()).remove();
                      }
                    }
                  	$(this).attr('colspan',nb);
                
                }                   
          }
          
          
          if ($(this).css("grid-row-start") != undefined)
          {
            	
                var nb = $(this).css("grid-row-start");
            	var idCol = $(this).attr('data-column')
            	if ($(this).css("grid-row-start") != 'auto' && $(this).css("grid-row-start") != '')
          		{
                  	var elt = $(this).parent('tr'); 
                  	for(let i=0;i<nb;i++)
                    {
                      if (elt.next() != undefined)
                      {
                      		elt = elt.next();
                       		if (elt.children('[data-column=' + idCol +']') != undefined)
                      		{
                              	
                            	elt.children('[data-column=' + idCol +']').remove();  
                            }
                      }
                      
                    }
                  	$(this).attr('rowspan',nb);
                
                }
                  
                               
          }    
        });
        
};


$(function() {
  $('body').on('jeedom_page_load', function (event) {
	setTimeout(function() {
//    	addColspan($('div.eqLogic-widget[data-plan_id] td'))
      addColspan($('td'))
     }, 1000) 
   // setInterval(function() {
   // 	addColspan($('div.eqLogic-widget[data-plan_id] td'))
   //  }, 5000) 
  })
})

Côté CSS, j’utilise quelques trucs de @dJuL (pour le background), et @kiboost pour l’affichage dashboard :

/* applique la fonte pour toutes les pages */
font-family:Rubik-light;			

/* site de kiboost */
/* https://kiboost.github.io/jeedom_docs/jeedomV4Tips/Interface/fr_FR/ */

/* changement des couleurs par catégorie d'équipement */
:root {
  --cat-security-color: 155, 75, 70;
  --cat-heating-color: 46, 141, 205;
  --cat-automatism-color: 128, 128, 128;
  --cat-light-color: 243, 156, 18;
  --cat-multimedia-color: 52, 73, 94;
  --cat-energy-color: 46, 176, 75;
  --cat-other-color: 25, 188, 156;
  --cat-scenario-color: 127, 140, 141;
}

/* pour libérer la largeur des cases des tableaux et fixer directement dans le virtuel */
.eqLogic-widget .tableCmdcss div.cmd-widget {
  min-width: unset;
}

.tab-content .table.table-bordered.table-condensed
 {
   width: calc(100% - 30px);
}

/* changement des couleurs de scénario */
:root {
  --scBlocIF: rgb(65,90,110);
  --scBlocElse: rgb(50,75,95);
  --scBlocACTION: rgb(132,120,112);
  --scBlocIN: rgb(75,128,62);
  --scBlocAT: rgb(92,122,132);
  --scBlocFOR: rgb(152,116,22);
  --scBlocCODE: rgb(160,60,25);
  --scBlocCOM: rgb(60,60,60);

  --scBlocSep: rgb(35,35,35);
}

/* titre à gauche dans le dashboard */
[data-page="dashboard"] legend {
  text-align: left !important;
}

/* taille du résumé */
.objectSummaryParent {
	font-size: 14px;
}			

/* https://community.jeedom.com/t/personnalisation-avancee-dark-sobre-light-jeedom-v4/10345/5 */
/* ajout du fond d'écran darksobre */
body[data-theme="core2019_Dark"] .backgroundforJeedom {
	background-image: url("/core/themes/darksobre/background.jpg")!important;
    background-size: cover;
    opacity:0.9;
}

body[data-theme="core2019_Light"] .backgroundforJeedom {
	background-image: url("/core/themes/darksobre/background.jpg")!important;
    background-size: cover;
    opacity:0.9;
}

body[data-theme="core2019_Legacy"] .backgroundforJeedom {
	background-image: url("/core/themes/darksobre/background.jpg")!important;
    background-size: cover;
    opacity:0.9;
}

J’avais déjà le souci avec.

La question que je me pose est est-ce que la taille des cases/tableaux ne « bloquent » pas cette fusion quand les éléments de ce dernier vivent ?

J’ai réduit la taille des icones dans le tableau par exemple, de 53 à 50 soit 6 px de gagné.

698×707 41.8 KB

Pour info, j’ai fixé en général largeur et taille du tableau pour éviter son formatage n’importe comment.

795×626 56.3 KB

Donc plus petit :

Et si j’appuie sur un bouton et que l’icone change :

Et là je me dis … j’avais oublié !
J’utilise un code de @noodom qui change les options d’un widget (ici la couleur et l’icone !).

Le problème est peut être là !

Un scénario qui change icone/couleur :

2157×828 131 KB

Qui appelle un scénario code php :

Scénario de modification de paramètre d'une commande
2 paramètrages possibles pour les tags à passer au scénario (par id ou nom de commande) :
- idCommande (id de la commande info), nomParametre (nom du paramètre), valeurParametre (valeur du paramètre)
- nomCommande (nom de la commande info), nomParametre (nom du paramètre), valeurParametre (valeur du paramètre)

!! IMPORTANT !! : pour le nom de la commande, ne pas mettre les # : mettre sous forme [Objet][Equipement][Commande]
 développé par @noodom, merci à @salvialf pour le code permettant de modifier un paramètre de commande
Récupération des tags passés en paramètres.

Voilà le code du scénario :

//Scénario de modification de paramètre d'une commande
// 2 paramètrages possibles pour les tags à passer au scénario (par id ou nom de commande) :
// - idCommande (id de la commande info), nomParametre (nom du paramètre), valeurParametre (valeur du paramètre)
// - nomCommande (nom de la commande info), nomParametre (nom du paramètre), valeurParametre (valeur du paramètre)
//
// !! IMPORTANT !! : pour le nom de la commande, ne pas mettre les # : mettre sous forme [Objet][Equipement][Commande]
//
// développé par @noodom, merci à @salvialf pour le code permettant de modifier un paramètre de commande

// Récupération des tags passés en paramètres.
$tags = $scenario->getTags();

// initialisation de variables locales
$tags['#erreur#'] = "";

if ((!empty($tags['#idCommande#']) || !empty($tags['#nomCommande#'])) && !empty($tags['#nomParametre#']) && isset($tags['#valeurParametre#'])) {
  $scenario->setLog("- Modification du paramètre ".$tags['#nomParametre#']." de la commande ".$tags['#nomCommande#']." : ".$tags['#valeurParametre#']);

  // Récupération de la commande en fonction de son id ou de son nom passés en paramètre
  try {
      if ($tags['#idCommande#'] != "") {
          $scenario->setLog("Récupération de la commande d'id ".$tags['#idCommande#']);
          $cmd=cmd::byId($tags['#idCommande#']);
        if (!is_object($cmd)) {
          // Commande non trouvée
          $tags['#erreur#'] = "Commande non trouvée !";
          $scenario->setTags($tags);
        }
      }
      else {
          $scenario->setLog("Récupération de la commande #".$tags['#nomCommande#']."#");
          $cmd=cmd::byString('#'.$tags['#nomCommande#'].'#');
      }
  }
  catch (Exception $e) {
      // Commande non trouvée
      $tags['#erreur#'] = "Erreur de récupération de commande !";
  }

  if ($tags['#erreur#'] == "") {
    // Log de la valeur de la commande
    //$valeurCommande=$cmd->execCmd();
    //$scenario->setLog("- Valeur de la commande : ".$valeurCommande);
    // Mise à jour du paramètre
    $arr = $cmd->getDisplay('parameters');
    $scenario->setLog("- Mise à jour du paramètre ".$tags['#nomParametre#']." : ".$tags['#valeurParametre#']);
    $arr[$tags['#nomParametre#']] = $tags['#valeurParametre#'];
    $cmd->setDisplay('parameters', $arr);
    $cmd->save();
  }
}
else {
  $tags['#erreur#'] = "Pas de nom, ni d'id de commande ou pas de nom de paramètre ou pas de valeur de paramètre";
}

if ($tags['#erreur#'] != "") {
  // Erreur de modification de paramètre
  $scenario->setLog("*** ERREUR de modification de paramètre (".$tags['#erreur#'].") : "
  	."nomCommande=".$tags['#nomCommande#']
    .", idCommande=".$tags['#idCommande#']
    .", nomParametre=".$tags['#nomParametre#']
    .", valeurParametre=".$tags['#valeurParametre#']);
}
else {
  // Pas d'erreur de modification
  $scenario->setLog("*** MODIFICATION OK avec les paramètres : "
  	."nomCommande=".$tags['#nomCommande#']
    .", idCommande=".$tags['#idCommande#']
    .", nomParametre=".$tags['#nomParametre#']
    .", valeurParametre=".$tags['#valeurParametre#']);
}
$scenario->setTags($tags);
134

Hello,

Je ne pense pas que la taille joue.
on voit bien qu’il régénère l’affichage sans appeler le script javascript.
(il vire le Colspan= 2 et régénère le TD suivant (que mon code enlève normalement).

Je pense que tu tiens quelque chosé avec le code de Nodom.
Pour être sur, il faudrait temporairement décocher l’action qui appelle le scénario.

Je pense que le soucis peut venir de la (dans le code PHP) :

$cmd->setDisplay('parameters', $arr);
    $cmd->save();

Il faudrait de nouveau appeler la fonction Javascript pour qu’il remette bien le tableau.

Mais je t’avoue que je ne sais pas comment faire pour le moment.

  • Soit on le déclenche du PHP.
  • Soit on sait qu’elle fonctionne cela lance en JS et on lance à partir de la
135

@noodom, ton avis ?

Merci @olivvv59, peut-être ajouté 200 ou 300ms à la fin du code php de @noodom, relancer les codes de personnalisation avancée ?

je te confirme que j’ai fait un essai si je retire le changement d’icone par le code PHP, pas de pb de tableau… sauf sur certains de mes widgets où je change quelque chose (taille d’icone par exemple en fonction de l’état).

du coup, y a t’il possibilité de faire de même dans le code d’un widget sur le refresh, appeler la fonction qui reformate le tableau ?

136

Faudrait que je vois avec @noodom, s’il sait comment je peux appeler la fonction JS suite à son script PHP.

  • Soit appeler du JS à partir du PHP
  • Soit capter un évènement particulier sur la page (refresh, …) qui nous permettrait d’appeler de nouveau la fonction JS au bon moment.

@kiboost , ne saurais tu pas sur quel évènement peut on se baser après la maj du design (ou d’une tuile) en PHP?

137

Personne pour nous aider pour lancer une fonction js dans un bloc code PHP ?

@ajja17orange ? :slight_smile:

138

de se je comprend : (désolé si je suis hors sujet, et si je dit une bêtise)
le js s’exécute côté client
PHP côté serveur
on peux faire un lancement PHP à partir d’un js (donc lors de mise à jour exécute php) mais pas l’inverse.

avec api jeedom

il y a aussi via js surveillance « obseever » id/class et si changement attribué, reporté,… « lancement scénario via api jeedom »

plug html display qu’on cache dans un coin

1 « J'aime »
139

Merci pour la réponse.
C’est tout à fait ça.
Le serveur transforme le PHP (ou ASP, c’est le même principe) en HTML.
Le navigateur n’a qu’a lire le HTML.

Le JS s’exécute coté client.

J’ai vu dans mon code. Que j’avais fait un essai, il y a quelques temps.
Je l’avais mis en commentaire.
Je crois que ca correspond à ton dernier lien.

Il faut faire de l’AJAX.
C’est à dire que c’est le coté client qui demande à la commande de s’exécuter et on attend son retour avec Sucess (on appelle ça du synchrone … on attend le retour pour continuer) .
Il peut avoir de l’asynchrone. La commande AAX (php) fait sa petite vie dans son coin (en parallèle). on attend pas son retour

Cela serait un truc de ce genre :

jeedom.cmd.update[cmdId] = function (_options) 
	{
		jeedom.cmd.execute(
          { 
            id: cmdId, success: function (currentValue) 
            {
// Appel de la fonction JS
					
           }
           );
	};
140

Hurmf, je vous suis de loin car là c’est au delà de mes compétences … on fait quoi alors :slight_smile: ?

141

faut que je prenne du temps pour tester.
Le but, c’est que le JS (au click), qui appelle la fonction PHP de @noodom
On attends le retour et on lance ma fonction js pour remettre le tableau en état

1 « J'aime »
142

Bon, dans un souci de simplification et de temps passé nécessaire et compte tenu du fait que mon design est terminé, j’ai supprimé cette fonction JS et j’ai revu mes virtuels.

Cela m’a imposé de jouer avec des virtuels vides pour faire des titres et sur les 2 cas où je ne pouvais fusionner les colonnes de créer un sur-virtuel qui se superpose dessus…

Par exemple pour celui là :

C’est en fait trois virtuels :


Au final, sauf la localisation et celui-là, tout le reste c’est un virtuel titre que je superpose sur les cases vides.

De ce fait, plus de JS, plus de problème de refresh par JPI des tablettes à faire toutes les 2 min pour avoir un design présentable.

C’est un peu dommage, mais cela m’a pris au total 1h30…

1050×664 446 KB

1 « J'aime »
143

Bonjour,

Question bête, tu fais comment pour avoir la bonne taille de ton titre dans le virtuel « Today (titre) » ?
Longeur en dur dans la case css de ton tableau à 1 ligne/1 colonne ?

144

C’est un simple tableau à 1 colonne, 1 ligne. width:150px par exemple.

145

ok merci. Je me doutais de ça.

146

je suis désolé.
J’ai pas eu le temps de regarder. c’est compliqué en ce moment.

le principal, c’est que tu ais réussi à trouver une solution.

147

Ne t’inquiète pas, ce n’est pas parce que tu n’as pas trouvé de solution que j’ai fait cela. C’est aussi car une fois mon design finalisé, il m’était rapide de trouver une solution. Certes « pas jolie »…

1 « J'aime »