Comment désactiver le min-width:90px des commandes dans le CSS personnalisé

[Guilhem]

Salut les cadors du CSS, je suis toujours à fond sur mon design… Et je fais face à un petit soucis de CSS que j’arrive bien à identifier mais que je ne sais pas trop comment corriger…

Voilà le soucis :

Les trois icônes de la dernière ligne de mon tableau (dans un virtuel) sont beaucoup trop écartées les unes des autres. Ceci est du au min-width:90px imposé à tous les éléments de ce type (cf. capture dans les outils de dev de Chrome). Quand je le décoche, j’obtiens ce que je veux.

Comment faire en sorte de désactiver ce min-width pour ces éléments spécifiques ?
Sans impacter tout le reste de ma Jeedom et sans gratter dans les CSS du core…
Il doit bien y avoir moyen de faire ça dans le CSS personnalisé non ?

Merci à vous

[kaktusatomik]

Bonjour
Tu peux essayer :

div.cmd-widget[data-type="info"][data-subtype="numeric"][data-template="tmplmultistate"][data-eqlogic_id="171"] {
	min-width: inherit !important;
}

[Guilhem]

Merci je vais essayer !

J’ai recopié tout le bloc en ajoutant l’ID de la commande spécifique et en mettant à 0px le min-width :

div.cmd-widget[data-type="info"][data-subtype="numeric"][data-template="tile"], div.cmd-widget[data-type="info"][data-subtype="numeric"][data-template="tmplmultistate"][data-cmd_id='1826'] {
    min-width: 0px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 0;
}

Je sais pas si c’est très « conventionnel » mais je viens de tester et ça semble fonctionner… Ca va me faire bcp de duplication mais à la limite pourquoi pas.

[kaktusatomik]

Justement, en ajoutant data-eqlogic_id=« 171 » ça l’applique à toutes les cmd de l’équipement

[Guilhem]

@kaktusatomik

min-width: inherit !important;

T’as solution fonctionne et elle est bien plus élégante que la mienne !
Moins de redondance, ça engloble tout l’équipement !
Grand merci à toi

[kiboost]

Sur tes équipements concernés, configuration avancé, paramètre optionnel tu ajoute

desktop_class resetminwidth

et en css perso

.resetminwidth .cmd-widget {
  min-width: unset !important;
}

Comme çà tu n’a qu’à mettre cette class sur les equipements que tu veux et ce sera pris automatiquement sans jouer avec des id

[Guilhem]

Parfait ça !! Je vais tester. Merci

[Guilhem]

Alors je n’ai pas réussi à faire fonctionner ta technique avec les paramêtres optionnels :

Le CSS personnalisé.

La config du virtuel.

Résultat : icônes écartées…

Il doit y avoir un truc qui m’échappe.
Par contre sur le principe ce serait top que ça marche parce que ça me permettrait d’utiliser ça pour toutes les autres personnalisations.

[kiboost]

F12, editeur de style, custom.css et tu test en live. une fois que c’est bon tu le remet dans personnalisation avancée

[Guilhem]

ok je suis pas sûr d’avoir le niveau là !! Mais je vais regarder !

J’ai l’impression que c’est le paramètre optionnel qui n’est pas appliqué.
Quand je recherche dans le code source de la page il est nul part.
Je pense que le CSS est ok.

[Guilhem]

Ok ça marche c’était dashboard_class et non desktop_class.
Génial ça va franchement me faciliter la vie.
J’imagine qu’on peut en mettre autant qu’on veut du coup des classes comme ça…

[kiboost]

Ah oui désolé

Essaye en les separant par un espace çà devrait marcher

[Guilhem]

En même temps, c’est quand même toi qui m’a aidé pour trouver desktop => dashboard grâce à cette page :

Jeedom v4 | Interface

qui au vu du nom du compte Github ne doit t’être complètement inconnue.

[Guilhem]

Je te confirme ça marche quand on en met plusieurs séparées d’un espace. Ca va changer ma vie ce truc là !