Ajuster la taille des colonnes d'un tableau

mich0111 · Janvier 20, 2020, 9:47

Bonjour,

Je sèche sur le problème suivant.
Je fais afficher le tableau des horaires de la journée suivant sur ma tablette :

Capture

Afin de l’optimiser, je voudrais réduire la taille des colonnes des horaires mais impossible de trouver comment. Apparemment, elles occupent tout l’espace possible.
Si je force la réduction de l’espace du tableau, la colonne des titres se rétrécit mais pas celle des valeurs.
J’ai essayé des width, max-width dans le CSS du tableau mais rien y fait.
De plus il ne semble pas possible de dimensionner dynamiquement la taille des colonnes du tableau, uniquement l’espace qu’il occupe globalment.
Donc, si vous avez une suggestion à me proposer, je suis preneur.
Merci d’avance.
Bonne journée.

Sbo · Janvier 20, 2020, 7:02

un width doit fonctionner :

ex sur un de mes tableaux :

width:33%; border: thin solid gray;background: rgba(255, 255, 255, .2); box-shadow: 0 0 0 1px; border-radius: 5px; text-align: center; opacity: 0.8; font-weight: bold;

Après en v4 les bordures sont un peu mangées et pas encore creusées pour contourner le problème

mich0111 · Janvier 20, 2020, 7:12

Malheureusement, je l’ai déjà tenté sans succès.
Je l’ai fait avec une taille en px pas en %.
Je vais essayer mais je n’y crois pas trop.
Peut-être faut-il que toutes les cases de la colonne doivent être mises à la même taille pour que ça marche.
Merci quand même, je te tiens au courant

mich0111 · Janvier 20, 2020, 7:30

J’ai mis une colonne à 10% et l’autre à 20%.
Résultat,.elles sont à la même taille.
Comme il s’agit de colonnes contenant des durées horaires, je me demande si la taille n’est pas conditionnée par le contenu. Sachant qu’il y a peut-être des infos non visibles comme les secondes.

MarcF · Janvier 20, 2020, 7:36

Bonjour
Je suis dans le même cas
Voir

Impossible de modifier la taille des colonnes malgré avoir testé plusieurs commandes

mich0111 · Janvier 20, 2020, 7:39

Si quelqu’un de la team (@Loic, @Alexandre, …) passait par là pour nous donner son avis, ce serait sympa.
Merci

mich0111 · Janvier 20, 2020, 8:44

Pour info, j’ai ajouté la propriété !important en mettant :
background-color: aqua;color: black; vertical-align: middle; border-width: 1px; border-style: solid; border-color: black; width:10px !important;

Mais ça n’a rien changé.

Capture

mich0111 · Janvier 20, 2020, 9:09

J’avance dans mes investigations.
Apparemment, le problème ne concerne que les cases contenant des valeurs.
Les cases contenant du texte en dur peuvent dimensionnées à l’envie.
Enfin je ne sais pas pour la largeur mais, par exemple, l’alignement est pris en compte dans ce cas et pas pour les valeurs.

Screenshot_20200120_221202

ajja17orange · Janvier 20, 2020, 9:13

joue avec flex ou la config avancée css

genre le slider binaire là
un width et un margin « 4 coins » (important)

le margin m’agrandir « en hauteur » le libellé de la ligne horizontale
regarde sur le github core jeedom le widget source pour savoir qui fait quoi (id/class)

mich0111 · Janvier 20, 2020, 9:49

Ok, je te remercie.
Là je fais faire une pause.
Je verrais ça demain et je te ferais un retour.
Bonne nuit

mich0111 · Janvier 21, 2020, 10:33

Salut,
Je viens de constater que les valeurs (state) sont en classe strong, alors que les libellés non.
Penses-tu que cela puisse jouer?

Capture

ajja17orange · Janvier 21, 2020, 5:22

je continuerai mon test se soir
en essayant sans aucune modif/creat de widget

regarde le core Tile

github.com

jeedom/core/blob/stable/core/template/dashboard/cmd.info.numeric.tile.html

<div style="min-width:90px;min-height:60px;margin-right: 5px;margin-left: 5px;padding:0px !important;" class="cmd #history# container-fluid tooltips cmd cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-weight: bold;" class="pull-right">#unite#</span>
		<span style="font-size: 2em;font-weight: bold;" class="pull-right state"></span><br/>
		<div style="#displayHistory# font-size: 0.8em;" class="col-xs-12 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>
	</center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

1er ligner mini width

donc pour avoir 80px

ajja17orange · Janvier 21, 2020, 8:20

édition précédent message

MarcF · Janvier 22, 2020, 4:53

Bonjour
Dans mon cas, quelque soit les modifs, rien ne change, on dirait que les valeurs sont en dur qlq part …mais ou ?

mich0111 · Janvier 22, 2020, 4:56

Tout pareil.
Je crois que ça doit se passer au niveau du core.
Donc, je ne bouge plus sur ce sujet en attendant l’idée géniale.

MarcF · Février 2, 2020, 7:47

A priori personne n’a d’idée géniale

BavoJee · Janvier 7, 2022, 9:56

Bonjour,
Un an plus tard, mais est-ce qu’il n’y a toujours pas de solutions pour ceci?
J’ai egalement ce probleme que les valeurs tile prennent trop de place et je ne peux pas les aligner. Puis, je ne veux pas aller changer qoui que ce soit dans le core.

Je n’arrive pas a coller le nombre de lampes allumees contre le ‹ / ›.

Merci

pahpey · Février 19, 2023, 12:02

Meme problème pour moi.

leroipele · Avril 12, 2024, 7:15

Méme pb pour moi et grosse différence de l’affichage lors du passage à la version 4.4 du CORE.

PAs d’avancée sur le sujet?

Bison · Avril 12, 2024, 7:20

Bonjour,

Voir ici peut-être : Jeedom 4.4.2 - Difficulté à changer la taille des colonnes dans un design - #14 par Bison