Widget - Tableau - CSS Jeedom v3.1.x
Re: Widget - Tableau - CSS Jeedom v3.1.x
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
Aide nous à t'aider : mets des logs, détaille ton soucis... Vous n'aurez aucune réponse de ma part si votre demande n'est pas détaillée (log, capture d'écran lisible...) ou si vous ne postez pas dans la bonne section
Re: Widget - Tableau - CSS Jeedom v3.1.x
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.
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.
- Pièces jointes
-
- Capture d’écran 2018-01-21 à 18.41.19.png (12.11 Kio) Consulté 3669 fois
-
- Capture d’écran 2018-01-21 à 17.33.49.png (103.09 Kio) Consulté 3675 fois
-
- Timide
- Messages : 207
- Inscription : 12 janv. 2016, 12:15
- Localisation : Suisse
Re: Widget - Tableau - CSS Jeedom v3.1.x
Hello, Antionekl1 as-tu une réponse à cette question ?
Merci d'avance.
Merci d'avance.
Antoinekl1 a écrit : ↑16 oct. 2017, 12:49Bonjour
est il possible de fusionner plusieurs cellules ? avec colspan ou rowspan, je ne trouve pas la bonne syntaxe
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]
Re: Widget - Tableau - CSS Jeedom v3.1.x
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
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
- Helper
- Messages : 2714
- Inscription : 22 févr. 2015, 17:32
- Localisation : Près de Grenoble
- Contact :
Re: Widget - Tableau - CSS Jeedom v3.1.x
Réponse tardive : tu peux mettre du padding-top négatif... ça devrait suffire à décaler vers le haut.guims78 a écrit : ↑21 janv. 2018, 17:36Hello, 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.
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
-
- Timide
- Messages : 207
- Inscription : 12 janv. 2016, 12:15
- Localisation : Suisse
Re: Widget - Tableau - CSS Jeedom v3.1.x
Ok, merci yomesis.
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]
- Theduck38
- Helper
- Messages : 2714
- Inscription : 22 févr. 2015, 17:32
- Localisation : Près de Grenoble
- Contact :
Re: Widget - Tableau - CSS Jeedom v3.1.x
Tiens, je viens de découvrir un truc pour le "texte à afficher" :
Ça laisse supposer qu'on peut aller plus loin avec des balises....
La balise de retour à la ligne est prise en compte.Ça laisse supposer qu'on peut aller plus loin avec des balises....
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
-
- Timide
- Messages : 207
- Inscription : 12 janv. 2016, 12:15
- Localisation : Suisse
Re: Widget - Tableau - CSS Jeedom v3.1.x
Theduck38, a quoi sert "float:left" dans ton tableau, pour quoi l'utilises-tu ?
Thanks.
Thanks.
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]
- Theduck38
- Helper
- Messages : 2714
- Inscription : 22 févr. 2015, 17:32
- Localisation : Près de Grenoble
- Contact :
Re: Widget - Tableau - CSS Jeedom v3.1.x
A forcer l'alignement du texte à gauche. J'ai pas trouvé comment faire autrement....
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
-
- Timide
- Messages : 207
- Inscription : 12 janv. 2016, 12:15
- Localisation : Suisse
Re: Widget - Tableau - CSS Jeedom v3.1.x
Il me semble que chez moi "text-align: center;" fonctionne pour l'alignement des textes dans les cellules.
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]
- Theduck38
- Helper
- Messages : 2714
- Inscription : 22 févr. 2015, 17:32
- Localisation : Près de Grenoble
- Contact :
Re: Widget - Tableau - CSS Jeedom v3.1.x
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é : .... et bien sûr, le text-align:left; ne marche pas non plus !
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é : .... et bien sûr, le text-align:left; ne marche pas non plus !
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
-
- Timide
- Messages : 207
- Inscription : 12 janv. 2016, 12:15
- Localisation : Suisse
Re: Widget - Tableau - CSS Jeedom v3.1.x
T'aurais pas ticker "centrer dans les cases" de la config générale ?
Jeedom 3.2.7 / PHP 7.0.27-0+deb9u1 sous Raspbian / Linux Jeedom 4.14.39-v7+ #1112 SMP Sat May 5 12:01:33 BST 2018 armv7l GNU/Linux [9.4]
- Theduck38
- Helper
- Messages : 2714
- Inscription : 22 févr. 2015, 17:32
- Localisation : Près de Grenoble
- Contact :
Re: Widget - Tableau - CSS Jeedom v3.1.x
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 !
En effet, ça permet de mettre le texte à gauche sans mettre de css. Bien vu et merci !
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté
-
- Actif
- Messages : 635
- Inscription : 27 janv. 2017, 10:53
Re: Widget - Tableau - CSS Jeedom v3.1.x
Je viens de faire ouvrir un ticket pour poser cette même question : Réponse impossible, même pas de ruse possible pour contourner.frankie666 a écrit : ↑16 févr. 2018, 21:37Hello, Antionekl1 as-tu une réponse à cette question ?
Merci d'avance.
Antoinekl1 a écrit : ↑16 oct. 2017, 12:49Bonjour
est il possible de fusionner plusieurs cellules ? avec colspan ou rowspan, je ne trouve pas la bonne syntaxe
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
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis
-
- Actif
- Messages : 635
- Inscription : 27 janv. 2017, 10:53
Re: Widget - Tableau - CSS Jeedom v3.1.x
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
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
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis
Re: Widget - Tableau - CSS Jeedom v3.1.x
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
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
- Pièces jointes
-
- 20180606_213947.png (134.16 Kio) Consulté 3297 fois
Re: Widget - Tableau - CSS Jeedom v3.1.x
ça ma donné une idée : joué avec la taille et marge
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
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;
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>
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;
Dernière édition par winhex le 06 juin 2018, 23:56, édité 1 fois.
-
- Actif
- Messages : 635
- Inscription : 27 janv. 2017, 10:53
Re: Widget - Tableau - CSS Jeedom v3.1.x
Merci ! Je vais tenter de m'en inspirer
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis
-
- Actif
- Messages : 635
- Inscription : 27 janv. 2017, 10:53
Re: Widget - Tableau - CSS Jeedom v3.1.x
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
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
Jeedom Smart
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis
Protocoles : Z-wave, Zigbee, Wifi et IR
Objets : Qubinos, Fibaros, Xiaomis
Re: Widget - Tableau - CSS Jeedom v3.1.x
1 float:left;
2 fonctionne ou pas selon le positionnement dans la ligne css
2 fonctionne ou pas selon le positionnement dans la ligne css
- Pièces jointes
-
- Screenshot_2018-06-14-15-58-13-538-1.png (262.54 Kio) Consulté 3205 fois
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 21 invités