Remplacer le saut de ligne des valeurs longues par des points de suspension lors de l'affichage des objets

[MehdiBouali (BOUALI Mehdi)]

Bonjour,

Sur l’affichage d’une table d’un objet ayant plusieurs colonnes, on souhaiterait que les cellules qui ont une valeur assez longue ne sautent pas de ligne et que leurs valeurs ne soient pas affichées entièrement.
A la place, nous souhaiterions que la cellule soit sur une seule ligne et que la valeur à l’intérieure, si elle est assez longue, nous l’afficherons avec 3 points de suspensions.

Exemple :

Nous avons cette ligne :

et nous souhaiterions :

Avons nous la possibilité de paramétrer cela sans passer par du code ?

Merci,

Mehdi

[Francois (François Genestin)]

Bonjour,

Votre besoin semble adressable par du pur CSS. Les champs texte en liste ont une classe breakword prévue à cet effet et qui par défaut autorise le retour à la ligne.

Vous pouvez dans la ressource STYLES d’un objet ajouter du CSS pour modifier localement le comportement. Exemple pour tous les champs de l’objet MyObject :

/* resource STYLES to add to object */
.objlist.object-MyObject .breakword {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

ou globalement ajouter du CSS dans votre Thème :

Pour le champ myField de tous les objets :

.objlist [data-field=myField] > div {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

ou pour toutes les listes de tous les objets :

.objlist .breakword {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

et laisser .breakword comme il est par défaut, car potentiellement utilisé ailleurs que dans des listes où il faut un retour à la ligne sans tronquer le texte.

Dans Simplicité customiser le front se fait généralement par CSS au niveau des STYLES de l’objet ou du thème. S’il vous manque une classe pour adresser simplement un style d’attribut à surcharger on pourra en créer.