Problème d'affichage des icônes importées

[Hamza]

Request description

Bonjour,je rencontre un problème concernant l’utilisation d’icônes dans l’affichage d’énumération

J’ai une configuration où j’utilise des icônes Boostrap (comme bi-pencil-square), et elles s’affichent correctement mais lorsque j’utilise des icônes personnalisées importées (Desyre de mon groupe), ces dernières ne s’affichent pas correctement.

Dans mon exemple ci-dessus, l’enum “Master” utilise une icône importée et présente une anomalie d’affichage, et l’enum Adaptation (qui utilise une icône Bootstrap) fonctionne parfaitement.

Avez-vous une idée de ce qui pourrait causer ce problème ?

Merci d’avance pour votre aide

Technical information

Instance /health

[Platform]
Status=OK
Version=6.1.14
BuiltOn=2024-11-13 12:35
Git=6.1/34709826975d46845d2c518ac5815bd118d09709
Encoding=UTF-8
EndpointIP=100.88.224.125
EndpointURL=http://lbc-77449-app-8d7c7c954-tq995:8080
TimeZone=Europe/Paris
SystemDate=2024-11-26 15:53:25

[Application]
ApplicationVersion=1.0.0
ContextPath=
ContextURL=https://lbc-app.ext.gke2.dev.gcp.renault.com
ActiveSessions=1
TotalUsers=301
EnabledUsers=22
LastLoginDate=2024-11-26 15:30:02

Simplicité logs

---paste the content of the **relevant** server-side logs---

Browser logs

---paste content of the **relevant** browser-side logs---

Other relevant information

----E.g. type of deployment, browser vendor and version, etc.----

[Francois (François Genestin)]

Bonjour,

A mon avis ton icone n’a pas de dimension et le bouton ignore sa largeur.
Comment est importé l’icone ? est-ce une font ou une image ?

Simplicité ajoute la class CSS “icon” qui force une font-size:1rem, qui permet à certains display “inline” (les boutons d’action sont en inline-block) de bien calculer la taille du contenu.

Si ton icone est un PNG, il faudra plutôt spécifier/forcer un style
width:1rem ou min-width:1rem

ou basculer le bouton en display: flex… par du CSS

(à voir si on devra l’ajouter à la classe .icon standard ou si c’est spécifique dans votre projet)

[Hamza]

Hello Francois,

Ca a fonctionné,nous avons testé en inspecter élement et ajouté le custom dans le css list de l’objet :

Concernant ce mini custom, il n’a pas affecté les icons en natif du système, à tester avec plusieurs listes d’icons différentes si pas d’anomalie ca serait top de l’avoir en natif oui,

merci pour tes conseils

[Francois (François Genestin)]

Ok on va voir pour ajouter un min-width pour le cas des icones qui ne sont pas des fonts, ou alors passer le bouton en flex plutot que inline.

Attention de bien contextualiser vos CSS pour ne pas que leur portée soit trop grande.
Si tu as surchargé “.icon” ça impactera toutes les icones.

par exemple pour changer les icones du formulaire supplier :

.objform.object-DemoSupplier .icon { min-width: 1rem; }

en liste

.objlist.object-DemoSupplier .icon { min-width: 1rem; }

[Hamza]

Super,
Oui, j’ai repris le standard simplicité pour les composant UI CSS , avec la structure css généré en exemple en commentaire pour aiguiller, c’est top, merci

/* LESS Styles LbcLegalText */

/*.objform.object-LbcLegalText {
	place here custom styles for the object's forms
}*/

/*.objlist.object-LbcLegalText {
	place here custom styles for the object's lists
}*/
.objlist.object-LbcLegalText .card-body .icon, .icon16 {
    min-width:1rem;
}```