Problème de recherche en liste

Bonjour,

Simplicité version4.0 patch level P24Built on2020-02-15 15:20 (revision d4cbab77697543570012c1708a710ab6cb15cac5)Database levelP24;d4cbab77697543570012c1708a710ab6cb15cac5

Contexte: En mode liste dans le cas où il a plus de colonne qu’affichées sur l’écran. Utilisation donc d’une scrollbar

Problème constaté: en mode recherche en entête de colonne, lorsque l’utilisateur utilise la scrollbar pour saisir un critère de recherche dans une colonne plus à droite, lors du clic dans le champ de recherche, on est renvoyé tout à gauche de la fenêtre, sans pouvoir donc saisir le critère de recherche. La scrollbar disparaît également.
Il est donc impossible de saisir un critère de recherche pour toutes les colonnes qui “dépassent” de l’écran à droite.

En terme d’UX responsive, il faut éviter les listes qui débordent en largeur.

C’est un problème CSS connu qui n’a pas de solution car pour afficher un dropdown au dessus d’une table, il faut nécessairement retirer le overflow du tableau, et le remettre une fois le popup fermé.

Si on laisse le scroll, il n’y aura plus de retour à gauche mais la popup passera “sous la table” s’il déborde en hauteur, ce qui est toujours problématique.

Votre champ de recherche popup en colonne doit

  • être dans la partie visible de l’écran
  • ou alors utilisable uniquement via la boite de dialogue de recherche (split à gauche ou en popup à droite).

Sinon pour avoir une solution à ce problème ça nous oblige à supprimer la table et tout passer en div/flexbox… Ce n’est pas encore prévu mais ça viendra, notamment pour un autre besoin d’avoir un header/titre des colonnes de liste flottant (toujours visible sur scroll vertical).

Sinon en attendant, il serait peut être envisageable de faire du JS pour déplacer le popup au niveau du body en position absolue (et plus relative au td), ça a déjà été étudié mais du coup ça restera pas très propre car si on continue de scroller, le popup ouvert ne se déplacera pas avec le tableau.

Bonjour,
nous avons un problème similaire : un tableau avec trop de colonne.
Votre solution d’utiliser une boite de dialogue de recherche nous conviendrait.
Le soucis c’est que notre tableau est dans une vue avec des filtres.
Or dans cette configuration, on ne peut pas détacher le bloc de recherche.

Une solution consisterait à mettre à gauche les colonnes sur lesquelles on souhaite filtrer.
Là encore nous avons un soucis puisque nos attributs sont placés dans des zones.
Vous avez déjà dit dans le post Dissocier l’affichage en liste de l’affichage formulaire que l’on pouvait enlever dynamiquement cet assemblage mais cela n’aurait pas de sens pour ce besoin.

Cordialement

[Platform]
Status=OK
Version=4.0.P24
BuiltOn=2020-03-23 21:40 (revision 5b0e84e9965680d212027bf49d22ca11feb363cf)
Encoding=UTF-8
EndpointIP=172.17.0.7
EndpointURL=http://9ed6f6be52b2:8080
TimeZone=Europe/Paris
SystemDate=2020-03-27 19:00:20

Dans ce cas, il va falloir que nous trouvions un contournement par Javascript pour repositionner le dropdown en position absolue + laisser le scroll sur la table + le déplacer sur onscroll de la table.
A suivre.

Bonjour,

Après quelques essais, il semble possible de laisser le scroll horizontal de la table tout en gardant le dropdown dans le <td>, en le forçant a être en position “fixed” et en recalculant sa position dans l’écran à chaque scroll pour qu’il reste à la fois collé et au dessus de son <td>.

Il y a encore de nombreux cas de popup à vérifier avant de pouvoir livrer cette évolution :

  • Recherche enum par case à cocher
  • Date picker en recherche + edit list
  • Menu “plus” par ligne
  • Enum affiché en select2 sur edit-list
  • Dropdown de completion
  • Relations N,N en rendering Pillbox

Ce sera fait dans la semaine.