Virtuel tableau v3: aide mise en forme

Bonjour à tous

Je fais appel à vous pour un problème d’ordre esthétique. Y aurait il un expert CSS parmi vous pour m’aider?
J’ai créé un virtuel présence que j’affiche en tableau sous la forme suivante:
AtHome (à gauche): présence calculée à partir de 4 infos différentes (à droite): bluetooth, wifi, GPS et distance:
tableau1

Le problème c’est que mes widgets se redimensionnent en fonction de ce qui est affiché donc leur taille évolue et ca casse la mise en page cf ce screenshot ou on voit bien les icones décalés:

tableau2

Idéalement je voudrais mettre un sous-tableau à droite mais je ne pense que ce n’est pas possible de mettre un tableau dans un tableau… Je cherche un moyen de limiter chaque widget à 50% de la largeur mais je n’ai pas trouvé sur le forum.

Voici un extract du code de mes widgets d’icone:

<div style="padding:0px;width:auto;height:120;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">  
    <span class="cmdName" style="padding-top:3px;font-weight:bold;font-size:12px;#hideCmdName#">#name_display#</span>
	<center>
      <div class="iconCmd#uid#"></div>
      <div class="timeCmd#id#" style="position:relative;font-size:10px;"></div>
	</center>
</div>  
<style>
    .iconCmd#uid# {
      margin:4px 4px 4px 4px;
    }
</style>

Merci d’avance :grin:

Salut,

Et si tu définis une largeur et une hauteur aux cases du tableau c’est mieux?

Salut @Salvialf
Merci pour ta réponse
J’ai plusieurs formats d’ecrans pour mes Designs, si je fixe hauteur et largeurs en pixels ca ne fonctionnera pas avec le zoom si? Pas moyen avec des % qui s’appliqueraient a la cellule?

Faut essayer :wink:

Je viens de modifier le widget avec 50%, ca ne marche pas :grimacing:

<div style="padding:0px;width:50%;height:120;"

OK j’ai bien relu ce que tu voulais… J’ai toute une liste de tests à faire sur les tableaux ça va entrer dedans car je ne suis pas sûr que tu puisses y parvenir par le code du widget.

Par contre ça doit pouvoir le faire avec des retours à la ligne avant | après le widget non ?

Le widget est le même pour toutes les commandes je ne comprends pas comment je peux m’en sortir avec des retours a la ligne? Il m’en faudrait un juste pour le 2e icône
Sinon j’avais pensé a un tableau 2 lignes x 3 colonnes mais je ne pense pas qu’on puisse fusionner la 1ere colonne.
Il n’y aurait pas moyen de customiser le style de la case de droite dans la configuration détaillée de l’équipement?

Un retour à la ligne après le widget avec l’icône wifi par exemple

Sinon tu code la taille en dur dans le widget mais il faut lui dire de quoi tu parles car height:120; il manque pixels… height:120px;

salut @Salvialf
Tu as raison il manquait px. J’ai réussi à m’en sortir avec la case retour à la ligne forcé.

Je voudrais améliorer mon widget en variabilisant sa taille et non celle de l’image cf code plus bas.
Ca fonctionne quand je renseigne les paramètres #largeur# et #hauteur# mais je n’ai pas trouvé comment modifier la largeur/hauteur de mon widget en js pour mettre une valeur par défaut?

<div style="padding:0px;width:#largeur#px;height:#hauteur#px;vertical-align: middle" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" title="#collectDate#">  
    <span class="cmdName" style="padding-top:3px;font-weight:bold;font-size:12px;#hideCmdName#">#name_display#</span>
	<center>
      <div class="iconCmd#uid#"></div>
      <div class="timeCmd#id#" style="position:relative;font-size:10px;"></div>
	</center>
</div>  
<style>
    .iconCmd#uid# {
      margin:4px 4px 4px 4px;
    }
</style>
<script> 
	jeedom.cmd.update['#id#'] = function(_options) {
	var valueState	= "off";            	
        if (parseInt(_options.display_value) == 1)
			valueState = "on";

        var width = ('#largeur#' !='#'+'largeur#') ? "#largeur#px":"50px";
        var height = ('#hauteur#' !='#'+'hauteur#') ? "#hauteur#px":"50px";
        // ko 
        $(".cmd[data-cmd_id=#id#]").style.height = height; 
        $(".cmd[data-cmd_id=#id#]").style.width = width; 

Pour concaténer en js il faut utiliser le signe +

var width = ('#largeur#' !='#'+'largeur#') ? '#largeur#'+'px' : '50px';

Du coup il faudra l’enlever de la 1ère ligne aussi car je suis pas sur que ça fasse bon ménage:

<div style="padding:0px;width:#largeur#px;height:#hauteur#px;

Je comprends mais tu ne réponds pas à ma question. Comment puis-je paramétrer la largeur du widget en utilisant un paramètre?

C’est demandé si gentiment…

Désolé je n’avais pas compris que tu voulais que je le code à ta place, je pensais que tu avais essayé des choses et que ça ne fonctionnait pas c’est pourquoi je t’ai donné des éléments pour avancer.

Tu m’as l’air sur la bonne voie notre ami G**gle doit être en mesure de répondre mieux que moi à cette question.

Allez j’suis sympa je te donne une piste : de ce que je vois tu mixe du jquery et du pur Javascript, il faut choisir l’un ou l’autre.

Je suis désolé je ne voulais pas te vexer. Non je n’attends pas que tu le codes pour moi, je cherche juste à savoir comment récurérer le root element pour lui appliquer height et width.
J’ai déjà bien cherché sur internet et utilisé d’autres solutions qui n’ont pas marché, je ne les ai pas listées ici car ca n’apporte rien à ceux qui auront la même question que moi.

$(".cmd[data-cmd_id=#id#]").css({"height": height, "width": width});

ça devrait pas être trop mal je pense y’a plein de manières d’y parvenir…

Super ca marche!
Merci beaucoup @Salvialf

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.