Widget info dans tableau : souci sur hauteur de cellule

Bonjour,

Vous pouvez voir dans le tableau ci-dessous la première ligne plus haute que la seconde et mon souci est là.
Dans la colonne connexion, j’ai des commandes de type info.
En cellule Salon/Connexion j’ai mis un widget simple de type : info/numérique/multisate que j’ai créé.
En cellule Cuisine/Connexion j’ai utilisé le widget Line.
tableau
J’ai tenté de diminuer la hauteur de la cellule via CSS au niveau :

  • du widget
  • du tableau :
    • Style général des cases (CSS)
    • Style du tableau (CSS)
    • Style de la case (CSS)

J’ai à chaque fois tenté : padding:1px;margin:1px;height:1px (avec et sans !important)

Je suis en Jeedom v4.0.58 et je ne suis pas un flèche en CSS mais je cherche pas mal.
Je pense qu’il doit être possible de le gérer ça en modifiant le code d’un widget …

Si vous avez une idée je suis preneur.
Merci

Bonjour,

C’est parce qu’il y a un height: 40px !important; sur une des classes du template Multistate : content-sm.
3 solutions :

  1. Tu augmentes la hauteur des autres lignes de ton tableau à 40px.

  2. Tu écrases le CSS du core en mettant cela en personnalisation avancée (17 est à remplacer par l’ID de ta commande) :

div[data-cmd_id='17'].cmd-widget .content-sm {
  height: unset !important;
  min-height: unset;
  max-height: unset;
}	 

Annotation 2020-06-29 120035

  1. Tu développes un widget code qui n’utilise pas les classes du core.

Hello Spine,

Merci pour ton retour :slight_smile:
Ça marche du tonnerre !
J’ai pris l’option 2 car j’essaie de reduire la taille du tableau et je ne m’y connais pas suffisamment en dev pour l’option 3 (qui est tout de même ma meilleure).

Il me reste une question. J’ai plusieurs infos à gérer de cette manière.
Est ce que je dois faire plusieurs lignes avec à chaque fois les ID de commandes ?
Ou est qu’il y a une syntaxe pour mettre plusieurs ID sur la même ligne ?

Voilà la syntaxe pour mettre plusieurs ID sur une seule ligne :

div:-webkit-any([data-cmd_id='4565'],[data-cmd_id='4572']).cmd-widget .content-sm {
  height: unset !important;
  min-height: unset;
  max-height: unset;
}

J’ai édité mon code précédent pour l’optimiser.

1 J'aime

Super !!

Merci beaucoup pour ton aide.

1 J'aime