Mise en page d'une page de conversation "tchat"

Bonjour à vous,

Je suis en train de travailler sur un petit espace de discussion "tchat".

Le code actuel se trouve ici

Ce que je cherche à réaliser :

1. un espace de discussion qui prend toute la hauteur de la page, avec tout en bas une zone de saisie de texte qui reste toujours visible.
2. lorsque l'on clique sur le bouton envoyer, le texte entré dans la zone de saisie de texte vient s'ajouter à la liste des messages.
3. les messages doivent apparaître selon l'ordre suivant : le plus vieux en haut, le plus récent en bas, et le début de la discussion doit partir du bas, comme dans n'importe quel "tchat".
4. je voudrais que les messages envoyés apparaissent sur le bord droit de la liste des messages et que les messages reçus apparaissent sur le bord gauche de la liste des messages.
5. je voudrais que la <div> entourant les messages soit ajustée à la longueur du message.
6. enfin, en cas de dépassement de la hauteur maximale disponible de la liste des messages, je voudrais qu'un ascenseur vertical apparaisse, uniquement pour la liste des messages, et non pour la zone de saisie de texte.

J'ai commencé à mettre en place tout ça mais j'atteins mes limites sur la mise en page CSS. C'est là que j'ai besoin d'un coup de main si vous le voulez bien

Mes 4 principales difficultés :

- Les <div> entourant les messages ne s'ajustent pas à la longueur des messages (j'ai lu qu'il fallait utiliser display: inline-block mais je ne dois pas l'utiliser correctement)

- La position des messages à gauche ou à droite : actuellement j'utilise text-align: left par exemple, c'est à dire à l'intérieur de la <div>, je "pousse" le message soit à gauche soit à droite... mais ça ne fonctionnera plus lorsque les <div> seront ajustées à la longueur des messages...

- J'utilise un flex-grow: 1; pour avoir la liste des messages qui occupe tout l'espace disponible ET la zone de saisie de texte qui se retrouve en bas : ce qui est ce que je souhaite. Mais je ne sais pas si c'est la bonne solution avec de potentiels effets collatéraux si la fenêtre est resizée.

- Enfin, je n'arrive pas à avoir un ascenseur vertical qui apparait lorsque la discussion dépasse la zone affichable malgré l'utilisation de overflow-y: auto;. Les messages les plus anciens ne sont plus visibles.


Merci pour votre aide dans la résolution de mes soucis de mise en page
Modifié par franchips (11 Aug 2020 - 16:05)

Bonjour,

flex-direction:column + overflow:auto semble toujours avoir cette incapacité a afficher une barre de scroll, tu peut éventuellement te retourner sur un display:grid , et un grid-auto-rows

Pour replacer le dernier en bas soit, scrollto a chaque rafraichissement/nouveau message ou prepend() et un effet mirroir avec transform:scale() ; (scrollto est probablement plus sur)

exemple en prepend, grid et scale(1,-1) https://codesandbox.io/s/exciting-jang-b7xs6

gcyrillus a écrit :
Bonjour,

flex-direction:column + overflow:auto semble toujours avoir cette incapacité a afficher une barre de scroll, tu peut éventuellement te retourner sur un display:grid , et un grid-auto-rows

Pour replacer le dernier en bas soit, scrollto a chaque rafraichissement/nouveau message ou prepend() et un effet mirroir avec transform:scale() ; (scrollto est probablement plus sur)

exemple en prepend, grid et scale(1,-1) https://codesandbox.io/s/exciting-jang-b7xs6

Merci pour ta réponse éclairante, le CSS peut être parfois assez sioux .

Avec ta méthode utilisant display:grid l'ascenseur vertical apparaît quand il y a besoin c'est nickel.

Encore une chose stp : aurais-tu une idée de pourquoi les <div> entourant les messages ne s'ajustent pas à la longueur des messages ?

Merci encore.

bonsoir,

est ce que tu veut dire comme ça ? https://codesandbox.io/s/intelligent-rosalind-9sfcb