Widget - Tableau - CSS Jeedom v3.1.x

[loic]

C'est normal c'est la sauvegarde de la position plus ya de commande plus il y a de sauvegarde à faire et plus la bdd à d'information à traiter

[guims78]

Hello, je déterre un peu ce post, car je n'arrive pas à mettre en page le tableau de mon virtuel.
Je cherche surtout à optimiser la hauteur.
Voici le code : 1er fichier
Voici le résultat : 2eme Fichier, virtuel SDB test
Je n'arrive pas à optimiser la hauteur de la 2eme ligne pour qu'elle soit au mini.

[frankie666]

Hello, Antionekl1 as-tu une réponse à cette question ?
Merci d'avance.

Bonjour

est il possible de fusionner plusieurs cellules ? avec colspan ou rowspan, je ne trouve pas la bonne syntaxe

[yomesis]

Hello,

Tu ne peux pas utiliser colspan ou rowspan car ces deux attributs s'appliquent sur la balise tr ou td, or jeedom ne te propose que de personnaliser le style, avec par exemple : border-bottom: 1px solid lightgray;

Yom

[Theduck38]

Hello, je déterre un peu ce post, car je n'arrive pas à mettre en page le tableau de mon virtuel.
Je cherche surtout à optimiser la hauteur.
Voici le code : 1er fichier
Voici le résultat : 2eme Fichier, virtuel SDB test
Je n'arrive pas à optimiser la hauteur de la 2eme ligne pour qu'elle soit au mini.

Réponse tardive : tu peux mettre du padding-top négatif... ça devrait suffire à décaler vers le haut.

[frankie666]

Ok, merci yomesis.

[Theduck38]

Tiens, je viens de découvrir un truc pour le "texte à afficher" :

Capture.PNG (4.62 Kio) Consulté 3571 fois

La balise de retour à la ligne est prise en compte.

Ça laisse supposer qu'on peut aller plus loin avec des balises....

[frankie666]

Theduck38, a quoi sert "float:left" dans ton tableau, pour quoi l'utilises-tu ?
Thanks.

[Theduck38]

A forcer l'alignement du texte à gauche. J'ai pas trouvé comment faire autrement....

[frankie666]

Il me semble que chez moi "text-align: center;" fonctionne pour l'alignement des textes dans les cellules.

[Theduck38]

Oui, mais justement je souhaite aligner à gauche .
Et là, vu mon "haut niveau" en css, je n'ai pas trouvé mieux...

Sur des grandes listes ça se voit si c'est centré au lieu d'aligné :

Capture.JPG (52.2 Kio) Consulté 3531 fois

.... et bien sûr, le text-align:left; ne marche pas non plus !

[frankie666]

T'aurais pas ticker "centrer dans les cases" de la config générale ?

[Theduck38]

P*****, je l'avais pas capté, celui-là...
En effet, ça permet de mettre le texte à gauche sans mettre de css. Bien vu et merci !

[GuillaumeDieppe]

Hello, Antionekl1 as-tu une réponse à cette question ?
Merci d'avance.

Bonjour

est il possible de fusionner plusieurs cellules ? avec colspan ou rowspan, je ne trouve pas la bonne syntaxe

Je viens de faire ouvrir un ticket pour poser cette même question : Réponse impossible, même pas de ruse possible pour contourner.
Mais c'est déjà très bien de pouvoir présenter sous forme de tableau, on verra par la suite si cette option peut être intégrée

[GuillaumeDieppe]

Bonjour,

Idem pas super doué en CSS...
J'ai le tableau ci dessous à organiser :




Le tableau correspondant :




Si je veux décaler le tableau du titre "BoiteAuxLettres", je mets du padding-top sur la cellule en haut à gauche, OK
Comment faire pour aligner horizontalement à gauche et verticalement au milieu les éléments de la colonne de droite ?
J'ai bien tenté float:left et text-align sans succès, je n'ai pas la case "centrer dans les cases" de cochée

[winhex]

amuse toi avec
vertical-align et float
ex float (right ou left)
en mode édition pour que tu vois le cadre cellule

il se peux aussi que tu modifies la hauteur du widget :
agrandirent celui de gauche
ou diminué celui de droite
afin qu'ils remplissent la cellule et que l'alignement soit en corrélation avec ton choix

je crains que milieu pour toi sera en réalité vertical-align en bas de la cellule

donc la hauteur height correspondant au besoin
imagine une image qui n'a besoin que de 50px et que le widget soit à 80
ta cellule de droite sera à 80

tu peux définir dans le tableau la hauteur aussi mais c'est préférable de partir sur une bonne base

[winhex]

ça ma donné une idée : joué avec la taille et marge

tab.png (8.8 Kio) Consulté 3283 fois

pour aller plus loin
1er cellule de droite
en css
height: 150px;width:100px;

et widget binaire avec style="padding:0 8px;" pour 1 et 3 sans avec 2 et 4

Code : Tout sélectionner

<div style="padding:0 8px;" class="cmd tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center><span style="font-weight: bold;font-size: 1.6em;" class="iconCmd"></span></center>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
     $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
     if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-portail_ouvert"></i>').css('color', '#ff9900');
     }else {
      $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-portail_ferme"></i>').css('color', '#e6e6e6');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

2eme cellule de droite
widget identique (sans padding)et en css
height: 150px;width:30px;float:left;margin: 32px;

edit
diminué la hauteur du 1
height: 60px;width:100px;
centrer le 2 (sans margin et float)
width:30px;padding:0 20px;

[GuillaumeDieppe]

Merci ! Je vais tenter de m'en inspirer

[GuillaumeDieppe]

Bonjour,

En bidouillant j'ai réussi à centrer verticalement :



Pour la dernière ligne :
- Colonne de gauche j'ai mis "padding-top:10px;text-align:center;"
- Colonne de droite j'ai mis "padding-top:10px;;display: flex;flex-direction: column;"

Pour les trois premières lignes :
- Colonne de gauche j'ai rien mis du tout
- Colonne de droite j'ai mis "height: 4em;line-height: 4em;white-space: nowrap;"

J'ai testé text align ou floatleft, ça reste centré horizontalement pour la colonne de droite. Qu'est ce que j'ai pu louper ?

Merci d'avance

[winhex]

1 float:left;
2 fonctionne ou pas selon le positionnement dans la ligne css