Nous avons rencontré un problème lors de nos développement au niveau d’une icone cliquable.
Le comportement que nous avons remarqué est un “scintillement” au dessus de cette icône.
L’icône en question :
Ce que nous entendons par “scintillement” est le fait que lors du survol de l’icone la tooltip et le curseur oscille rapidement entre plusieurs mode d’affichage ce qui rend complexe le clique sur cet icone.
voici une capture d’écran essayant d’imager le problème qui est compliqué a montrer en une unique image.
Apres quelques recherches de notre coté nous nous sommes rendu compte que ce “scintillement” n’apparaissait plus lorsque l’on passe notre interface en mode compacté et le problème interviens de nouveau lorsque nous remettons l’interface en mode étendu.
Ne sachant pas ce qu’implique les deux modes d’affichages (étendu et compacté) nous souhaiterions savoir s’il existait un moyen de forcer l’affichage en mode compacté à tout les utilisateurs de notre application pour éviter ce scintillement au niveau de notre icone? Et ainsi rendre plus accessible le clique sur cette dernière.
On peut forcer le mode compacté localement en ajoutant la classe compact dans une div contenant votre composant (le template ou dans l’area qui contient la liste par exemple).
Mais ça n’explique pas le scintillement sur hover.
Je ne reproduis pas le symptôme.
A priori ce tooltip s’affiche au même niveau que le pointeur de souris car la liste est trop petite en hauteur pour l’afficher en dessous du bouton (ce qui est le mode par défaut mais le plugin popper de bootstrap le replace dans une zone visible de la liste), ce qui fait perdre le hover du curseur, ferme le popup, puis redétecte un hover…
Il faudrait peut être que la UI n’utilise pas un tooltip bootstrap, mais un simple tip via “title” sur ce genre de bouton d’action où le libellé est sa traduction sans contenu riche/html. On va essayer de simplifier ce popup.
Mais vous pouvez aussi supprimer l’aide sur le bouton s’il y en a une.
Le mode étendu est un autre sujet, merci de ne pas mélanger les sujets dans un même post. Il est au choix de l’utilisateurs si l’objet possède des champs étendus (sauf en création où le formulaire est étendu), c’est un flag en mémoire front (isExtended dans les locals de l’objet ajax) et un paramètre de l’objet en back pour le garder en mémoire durant sa session (setMoreOnForm/List).
Je disais juste qu’on va livrer une simplification du tooltip d’action dans une prochaine révision quand celui est une texte simple (le libellé de l’action sans aide) autant afficher un “title” standard, et pas un tooltip bootstrap, ça ira également dans le sens de l’accessibilité.
Merci pour l’annonce de la correction même si j’imagine que cela ne sera sans doute pas backporté en 5.1
Le mode étendu est un autre sujet, merci de ne pas mélanger les sujets dans un même post. Il est au choix de l’utilisateurs si l’objet possède des champs étendus (sauf en création où le formulaire est étendu), c’est un flag en mémoire front (isExtended dans les locals de l’objet ajax) et un paramètre de l’objet en back pour le garder en mémoire durant sa session (setMoreOnForm/List).
En ce qui me concerne, et comme l’a demandé Mathilde au tout début du ticket, on a pas les tenants et les aboutissants concernant le mode étendu vs mode compact donc je considère que c’est un seul et même sujet; d’autant plus que je nous n’avons pas trouvé plus d’une ligne à ce sujet dans la documentation.
Ce ticket fait suite à un ticket remonté par l’utilisateur final et nous ne somme pas en mesure d’expliquer le contournement qu’on a trouvé par chance.
Compte tenu de la description que vous en faites, j’ai l’impression qu’il y a un quiproquo entre le bouton étendre et le mode etendu/réduire , non ? Le bouton a disposition de l’utilisateur ne joue que sur l’empliement ou non des div de ce que j’ai vu.
Quelle est la manière la plus simple pour supprimer l’aide sur ce bouton ? CSS ? JS ?
Merci d’avance.
essayez aussi de changer le caractère responsive de cette liste et Popper placera peut être le tooltip correctement sous le bouton comme Simplicité le lui demande. C’est étrange car sur votre copie d’écran on a l’impression qu’il y a bien la place…
.objlist.object-MyObject .table-responsive {
min-height: 10rem; /* essayez d'agrandir ? */
overflow-y: hidden; /* ou de retirer le scroll ? */
overflow-x: hidden;
}
Mais bon si compact corrige temporairement, ça ira le temps de livrer le correctif.
compact change uniquement le CSS pour gagner des espaces. On peut ajouter la classe compact dans la div pour y forcer en mode compact. Le bouton “Compact” dans le header place cette classe au niveau du <body> pour l’appliquer partout (labels alignés avec les inputs, marges plus petites…). Donc le forcer globalement impacterait tous vos écrans ce n’est pas juste un contournement (pour répondre au titre du post).
Le mode étendu est une fonctionnalité dédié au formulaire ou à la liste pour voir plus ou moins d’attributs d’un objet donné. Il y a peut être eu confusion, mais ces termes parlent bien de notions très différentes.
version 5.1
on la maintient toujours pour du correctif uniquement, le temps que vous passiez en 5.2.
donc oui ce sera backporté, ce n’est pas très impactant.
C’est un composant géré par bootstrap/popper, il faudra à l’affichage de la liste le désactiver en retirant les attributs du bouton. D’après la doc bootstrap :
Je constate aujourd’hui que le problème n’est plus d’actualité. Le scintillement a été corrigé par le fait que lors du passage de la souris, ce n’est plus un tooltip Bootstrap qui apparait mais une information via le title.
Merci pour cette correction qui répond a notre problème.
Nous sommes passées en version 5.1.59, pouvez vous valider que c’est bien dans cette version que cela a été corrigé?
