Avoir une entête fixe sur une div avec ascenseur vertical

Request description

Bonjour,

J’ai une vue en liste avec beaucoup de colonnes, pour laquelle j’ai fait en sorte que l’ascenseur horizontal soit toujours visible.

.objlist.object-RciDrpView .table-responsive{
	overflow-y:auto;
	height:35rem;
}

J’ai donc deux ascenseurs sur ma div de liste, un horizontal, un vertical.
L’ascenseur de mon navigateur n’apparaît plus car le nombre de lignes visibles ne dépasse plus la taille de l’écran.

Mon problème est que quand je scrolle à l’aide de l’ascenseur vertical de div, l’entête n’est plus visible.
J’ai l’impression que l’événement ne se déclenche que sur le scroll du navigateur.
J’ai tenté par tous les moyens d’ajouter la classe sticky-header à la balise thead sur le scroll de ma div, sans succès.

Pouvez-vous m’aider ?

Merci d’avance !
Emmanuelle

Le calcul du sticky header est du javascript compliqué pour cloner / scroller / tronquer le thead.
Modifier le comportement natif responsive des listes/scroll relève d’un travail d’équilibriste pour rebinder le scroll à un autre endroit. On a mis des mois pour converger vers cette ergonomie et tout le monde en est satisfait.

Le scroll horizontal est déjà dynamique.
Le scroll vertical est géré uniquement au niveau de la zone de travail.
Le mettre à un autre niveau contraint de forcer des hauteurs fixe/min ce qui est contraire à une approche responsive.

Une liste avec hauteur fixe n’a pas de sens car contraint à “paginer” 2 fois, avec ascenseur vertical + boutons de changement de page. Pour jouer sur la taille d’une liste il faut jouer sur le nombre de lignes min/max ramenées par défaut.

Merci pour ton retour, peut-être n’ai-je pas fait ce qu’il faut pour répondre à notre besoin : nous avons des utilisateurs qui viennent d’Excel et pour faciliter le changement nous avons mis en place une vue ISO avec l’ascenseur horizontal toujours visible par dessus les lignes qui dépassent sous l’écran.
Sinon l’ascenseur n’est accessible que sous la dernière ligne, ce qui oblige l’utilisateur à scroller en bas pour aller vers la droite, puis rescroller en haut pour voir les premières lignes.

Voici une copie anonymisée du résultat que j’obtiens avec l’ascenseur horizontal toujours visible

Si je comprends bien, ce que j’essaie de faire est beaucoup trop acrobatique ?
Dans ce cas je vais chercher un moyen de limiter le nombre de lignes afin qu’elles soient toujours visibles à l’écran, et il faudra changer de page pour voir la suite.

Au 21e siecle il doit être possible de scoller sans utiliser la barre de scroll

  • 2 doigts+ slide sur le touch pad
  • molette de souris moderne (avec maj ou ctrl enfoncé, ou molette qui est sensible à l’orientation, il faut aller dans ses options)

Si tu veux revenir à un Excel-like-non-paginé, il faut retirer l’option de pagination de la liste (ce qui signifie charger toute la table, donc forcer à saisir quelques filtres), et mettre des scroll sur la table de hauteur fixe via STYLES/CSS.

Pour fixer le header en haut, rien de standard en CSS, ce serait trop simple que de mettre un style “fixed” sur le thead. Tu pourras le faire plus facilement si les colonnes sont également de largeurs fixes.

Bref tout sauf responsive, il faut éduquer les utilisateurs à utiliser une interface web qui a été optimisée pour ça. Sinon il y aura d’autres contraintes d’ergonomie.

Bin en effet avec MAJ+molette, ça défile très bien (alors que clic sur la molette part un peu dans tous les sens)
Du coup on va rester au 21ème siècle :slight_smile:
Désolée du dérangement !

Emmanuelle

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