28160 sujets

CSS et mise en forme, CSS3

Bonjour,

Ce poste fait suite à https://forum.alsacreations.com/topic-4-62439-1.html
Ma table scroll à la perfection, mais maintenant, je souhaite qu'elle se redimensionne automatiquement sans qu'on ait à fixer la hauteur de tbody.

En gros, dans l'exemple que j'ai simplifié au possible: http://olivier.lahaye1.free.fr/SystemImager/log_table_bad.html (lien stable dans le temps)
J'aimerais que la table s'adapte aux dimensions du div dont le fond est beige.

Dans mon vrais code, les lignes (td) sont ajoutées par un server sent event. La table a donc ZERO lignes au départ.
Si je met la hauteur de tbody à 100% la table grossit jusqu'à la taille du div et devient scrollable à force d'ajouter des lignes.
Si j'agrandis la fenêtre, elle grandit en conséquence, MAIS si je réduit la fenêtre du navigateur: NADA: elle reste à sa plus grande taille et la page dans son ensemble devient scrollable y compris le header et le footer (ce que je ne veux pas).

Dans cet exemple, les lignes existent déjà et du coup la table est créée à sa taille max et c'est pire car le div est étiré à la taille max de la table et du coup c'est le document qui scroll (et pas le tbody).

Si on fixe let body height a une valeur comme 80vh, ça force à scroller, mais la valeur 80vh est arbitraire car le div qui se redimensionne ne fait pas tout le temps 80vh vu que le header et footer sont de hauteur presque fixe (varie seulement si la largeur force a augmenter ou réduire la hauteur pour afficher le contenu (text-wrap)), donc ça n'est pas bon.

Il doit bien y avoir une vraie solution css3 pure sans javascript, mais là, je sèche.
Donc si quelqu'un a la solution, je serait ravis de l'intégrer à SystemImager

Le rendu final doit ressembler à la dernière image ici: https://github.com/finley/SystemImager/wiki/ScreenShots

Pour les curieux, le code à Jour de SystemImager: https://github.com/finley/SystemImager/tree/initrd-from-imageserver-and-dont-package-initrd
Dont la console qui pose problème: https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/webgui/client_console.php
Les events sont générés depuis l'imager (un initrd créé par dracut via le module idoine) https://github.com/finley/SystemImager/tree/initrd-from-imageserver-and-dont-package-initrd/lib/dracut/modules.d/51systemimager
Et traité par le serveur: https://github.com/finley/SystemImager/blob/initrd-from-imageserver-and-dont-package-initrd/sbin/si_monitord

Modifié par olahaye74 (24 Oct 2019 - 16:51)
Finalement, j'ai trouvé deux solutions:

La première solution utilise des objets header footer and content et aligne les fils des lignes. L'inconvénient est qu'il faut fixer la largeur des colonnes soit en pourcentage, soit en em (ne jamais fixer e dimensions en pixel car le rendu n'est pas le meme sur un écran retina et sur un écran basse résolution!).
L'avantage est que ça marche sur tous les navigateurs ie11, edge, chrome, firefox, safari, ...
http://olivier.lahaye1.free.fr/SystemImager/log_table.html

La seconde solution utilise un grid layout avec une classe header et footer spécifique aux éléments du header et footer afin qu'ils restent "sticky".
L'inconvénient est que ça ne marche pas sous ie11 et que sous Safari, il y a un souci de redimentionnement vertical si la fenêtre du navigateur dépasse la taille requise. (les lignes s'étirent (elles ne devraient pas) sans que le cadre s'étire (comportement attendu). Du coup, des lignes disparaissent. (ce souci est mineur)
L'avantage est qu'on peut avoir des colonnes avec une largeur optimale (comportement similaire à une table classique)
http://olivier.lahaye1.free.fr/SystemImager/log_table3.html