Flexbox, sticky et scroll horizontal

Bonjour,

J'ai l'impression de n'être pas loin de la solution mais... à force de tatonner, je bute sans arriver à mes fins. :?

L'idée est de pouvoir afficher un ensemble d'informations dans un cadre scrollable horizontalement et verticalement tout en gardant l'entête en haut de l'écran, qui scrolle horizontalement mais reste fixe lors du scroll vertical.
L'actuel problème est qu'en scrollant horizontalement, les lignes et mises en formes semblent s'arrêter à la limite du cadre initial. Verticalement, tout se passe bien avec la première ligne restant bien positionnée.

L'entête est en flexbox, les données aussi avec des largeurs semblables entre les deux afin d'avoir un alignement cohérent.

Pièce jointe 582720Pièce jointe 582721

Lien vers le code selon l'exemple ici.

C'est peut-être deux fois rien, mais ce détail m'échappe.

Merci d'avance pour votre aide.
Memento

Bonjour,
Cela ressemble beaucoup à un tableau, un display table, ou même un tableau n'aurait pas été plus judicieux ?

Bonjour,

Disons que j'ai simplifié pour l'exemple, le "tableau" et ses données sont un peu plus évolués. Et j'ai un certain canevas à respecter.
Après, s'il faut absolument passer par un tableau pour que ça marche, je peux tenter de revoir le truc. Mais comme j'avais l'impression de ne pas être loin du but, je ne me suis pas posé la question de repartir de zéro avec un tableau (sans avoir la garantie que cela fonctionne comme je le souhaite avec un tableau).

Donc changer la méthode : vraiment en dernier recours.

Bonjour,
tu peux regarder du côté de Table scrollable avec colonne fixe, c'est visiblement ce que tu cherches à faire, sur base d'une <table> avec entête en position:sticky.

Si tu ne souhaites pas avoir la première colonne fixe il te suffit de supprimer le CSS suivant :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

tbody td:first-child { z-index: 1; position: sticky; left: 0; } thead tr:first-child th:first-child { z-index: 3; position: sticky; top: 0; left: 0; }

---

et ne garder que :

Code:

---

1 2 3 4 5

thead tr:first-child th { /* z-index: 2; /* devient inutile */ position: sticky; top: 0; }

---

Rappel (au cas où) : le positionnement sticky est non compatible IExplorer.

Bonjour NoSmoking et merci pour cette réponse.

Comme je disais, je ne souhaitais passer sur un modèle "table" qu'en dernier recours (car le tableau n'est en fait pas si simple + canevas standard par flexbox, simplification uniquement pour l'exemple).

Dois-je donc l'interpréter que la résolution de mon problème initial n'est pas possible ? Dois-je passer déjà en mode "dernier recours" ? :?

Bizarre comme exigence mais bon.

Déplace la couleur de fond sur les « cellulles »

Code:

---

1 2 3 4 5 6

.red { /* background-color: #F00; /* à supprimer */ } .red .col-a { background-color: #F00; }

---

idem pour ton entête.

La structure reste quand même tordue ;)

Je me dis que si quelque chose semble tordu, alors que ça ne me semble pas autant, c'est que je l'ai mal expliqué (soit le problème, soit le contexte). ;)

En fait, pour l'exemple, j'ai vraiment présenté ça sous la forme d'un tableau car ça me paraissait clair à simplifier. Le contenu réel est un peu plus complexe.. Il y a bien un lien entre l'entête et le contenu mais pas forcément sous la forme d'une matrice comme dans Excel. Le contenu, de l'entête ou du corps, peut être plus souple.
Le flexbox me semble idéal à manipuler. Le <table> demanderait de fusionner des cellules, de faire des bidouilles pour gérer les espaces. Un peu comme on faisait pour les toutes premières pages HTML.. En tout cas, c'est ainsi que je le voyais à une certaine époque où je développais. :oops:
Et surtout, avec mon exemple, je pensais être vraiment pas loin du but.

Pour l'idée de reporter la couleur sur les cellules (solution proposée), oui, effectivement pour ce remplissage, mais j'ai peut-être omis une contrainte dans la mise en page. Par exemple, mes éléments sont espacés et pas forcément collés les uns aux autres (margin). Du coup, cela mettrait des blancs entre les cellules. Les remplacer par des padding pour éviter ces espaces entre les cellules ? On pourrait bricoler un truc pour qu'il n'y ait plus de blanc entre les cellules mais pour le coup... si mon truc est tordu, question souplesse et maintenabilité, ce rafistolage en plus ne l'arrangerait pas. :mouarf:

Encore une fois, présenter sous la forme d'un tableau me parait moins souple. Mais si vraiment il n'y a pas de solution, je peux changer d'approche. ;)

J'ai mis à jour mon exemple (ici). Ajout des espaces et mes lignes sont séparées par des bordures.
En scrollant horizontalement, on voit que couleur d'entête et bordure s'arrêtent net. Comment faire pour que ça aille au bout dans ce contexte flexbox et entête sticky ?

Pièce jointe 582744

Merci de l'intérêt porté à mon problème.

Bon dans ce cas il faut changer le mode de rendu de tes éléments conteneur « ligne ».

Remplace ton CSS actuel par celui-ci

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

.g-stick { display: inline-flex; position: sticky; top: 0; text-align: center; background-color: #FF0; } .donnees { display: inline-flex; flex-direction: column; text-align: center; background-color: #F00; } .ent, .ligne { display: flex; align-items: center; } .col-a { display: inline-block; min-width: 130px; border: 1px #000 dashed; }

---

Oui, ça arrange très bien selon mon exemple ! Good !

Mais il y a encore un truc qui cloche : en copiant ton CSS, ça m'enlève le margin des cellules de mon dernier exemple. Quand je le remets, l'entête du pseudo-tableau reste bien fixe... sauf en scrollant tout en bas où il disparait proche du bas du tableau. :weird:

Voir l'exemple mis à jour ici.

Je recherche actuellement pourquoi. Une subtilité sur l'utilisation de sticky ? :koi:

Citation:

---

Quand je le remets, l'entête du pseudo-tableau reste bien fixe... sauf en scrollant tout en bas où il disparait proche du bas du tableau. :weird:

---

Plutôt une contrainte liée à la hauteur déclarée sur

Code:

---

1 2 3

.g-h-100 { /* height: 100%; /* a supprimer */ }

---

Citation:

---

Plutôt une contrainte liée à la hauteur déclarée sur

---

A force de tester en effaçant et ajoutant des choses, en perdant progressivement toute logique, je n'avais pas vu qu'il était resté. :aie:

J'ai corrigé. Ca marche sur l'exemple et après adaptation, ça marche bien sur mon projet final.

Super ! Merci encore NoSmoking. :ccool: