Forcer le mode compacté à tout les utilisateurs

Bonjour,

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 :
image
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.
image
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.
image

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.

Cordialement,
Mathilde

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.

Merci je vais mettre en place la classe compacté pour le composant en question.

Par curiosité sauriez vous pourquoi ? avez vous une idée de pourquoi ce scintillement a lieu ?

Merci beaucoup

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.

oui il est possible que ca soit a cause du manque de place dans le tableau en effet.

Est-ce qu’il existe une classe pour le mode étendu dans le Template ou bien est-ce que c’est en mode étendu initialement?

Quand vous parlez de title, vous parler du fait de metre une balise tilte dans le code html de la classe en question ?

merci d’avance pour vos réponses et votre temps

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é.

oui pardon excusez moi pour les différents sujets abordés.

d’accord pour la future version avec les title simplifiés

Bonjour François,

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.
image

Quelle est la manière la plus simple pour supprimer l’aide sur ce bouton ? CSS ? JS ?
Merci d’avance.

1 Like
  1. 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.

  1. 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).

  2. 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.

  3. 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 :

$('[data-action=xxx]',ctn).tooltip("disable");

Bonjour,

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é?

Cordialement,

Ca avait été backporté dans le cadre de la 5.1.58 releasée le 12/03

Mais de toute façon la révision actuelle est la 5.1.59 releasée le 24/03 (et une 5.1.60 va arriver bientôt pour un fix de sécurité).

parfait merci beaucoup :slight_smile:

je clôture le topic

This topic was automatically closed 60 minutes after the last reply. New replies are no longer allowed.