[Résolu] Alignement de liste

(reprise du message précédent)

parsimonhi a écrit :
Une <table> t'oblige elle-aussi à fixer le nombre de colonnes en dur (mais dans le html au lieu du css). Ça revient donc au même.

QuentinC a écrit :
C'est juste ! Sauf que ça ne revient pas au même, c'est pire, en fait...

Je n'avais pas osé l'écrire !

QuentinC a écrit :
A quoi sert le position: relative; par contre ? Je n'ai pas l'impression qu'il est nécessaire ?

Je l'avais mis à un moment pour m'assurer que le contenu caché (qui était en position: absolute) reste près de l'icône. S'il n'y a plus du tout de contenu caché, ça ne sert vraiment plus à rien.

QuentinC a écrit :
Avec ce code ça a l'air de pas trop mal marcher...

C'est l'idée. Tu peux aussi utiliser display: grid au lieu de columns d'une manière quasi aussi simple (voir ma dernière proposition d'hier).

QuentinC a écrit :
Ça m'ennuie un peu de devoir mettre le 30em en taille explicite

C'est clair que c'est ennuyant. Tu peux mettre 20em dans ton css au chargement de la page et éventuellement calculer par javascript une meilleure valeur à la volée une fois la page chargée. De toute façon tu as une grosse quantité de scripts dans ta page. Quelques lignes de plus ne changeront pas grand chose à l'affaire. Ceci étant, faire du javascript juste pour ça consternera avec raison les puristes. Tu peux aussi éventuellement creuser l'idée des containers queries (Olivier C en avait donné un exemple un peu plus haut).

QuentinC a écrit :
Le site officiel est http://qcsalon.net/

Voilà qui est extrêmement intéressant. N'étant que peu familier des lecteurs d'écran, je me demande régulièrement de quel genre de commandes on peut disposer quand on est en navigation clavier sans que ce soit la catastrophe par ailleurs. Ton site permet d'avoir des exemples de ce qui marche en de multiples circonstances, et aussi montre de quelle manière on peut fournir les indications à l'internaute. Super !

Amicalement,
Modifié par parsimonhi (03 Feb 2024 - 02:47)

Bonjour,

C'est un beau et très intéressant sujet

parsimonhi a écrit :
Bonjour,
....
Il me semble qu'on ne peut pas utiliser :

grid-template-columns: repeat(auto-fill, minmax(max-content, 1fr));

....
Amicalement,

Arf, tu as raison et je le sais, mais têtu j'insiste pour le retester à chaque fois. en fait , le max-content etait passé sur l’élément de liste pour que cela fonctionne. (reprise du code plus bas)

QuentinC a écrit :

Bonjour,

En s'inspirant du code de Xirillus, j'arrive à aligner les icônes de suppression, mais seulement si je fixe le nombre de colonnes en dur.
...

Le code que j'ai proposé s'appuie sur deux valeurs qui permettent l'affichage en colonne
1) grid-auto-flow: column; par défaut cette valeur est à row
2) une hauteur fixe ou maximale pour provoqué le passage dans une autre colonne.

Dans l'exemple j'ai choisi une hauteur inférieur à celle de la vue du navigateur pour ne pas avoir à scroller verticalement entre le bas et le haut d'une colone ,c'est un choix que je prendrais aussi probablement avec les column CSS avec un overflow horizontal au besoin.

J'ai reprit la feuille de style pour qu'elle soit plus lisible et facile à modifier .
le max-content pour la largeur des éléments de liste est utilisé avec width .Le plus large s'imposera pour définir la largeur de la colonne où il s'affiche.

reprise du POC en exemple en regroupant certaine valeurs dans des variables à des fins de réglages et tests visuels.

:root {
  /* initialisation 
  ****************
  Container max-height */
  --boxMaxHeight: 60vh; /* avoids vertical scrolling going to next column */
  /* container column minmax size */
  --ColumnMinMax: minmax(auto, 1fr);/* use only valid values [cligne] */
  /* Container row minmax size */
  --RowMinMax: minmax(2em, 1fr);
  /* content alignment */
  --alignXY:start;
  /* sizing child */
  --childWidth: max-content;
  /* container gutters */
  --ContainerGutters: 0.5em 2em;
  /* common spacing inside/outside */
  --spaceInOut: 1em;
}

https://codepen.io/gc-nomade/pen/PoLRJrm

un text-overflow:ellipsis ou un line-clamp sur le nom peuvent être ajouté.
J'ai ajouté un ombrage et passé le span caché en info bulle pour identifier à quoi la croix se réfère.
Voici un deuxième exemple qui dessine une barre entre chaque colonnes. https://codepen.io/gc-nomade/pen/bGZvYNa


Flex et writing-mode sont aussi une option :
https://codepen.io/gc-nomade/pen/MWxGGBy inspirer de https://stackoverflow.com/questions/69194293/wrapping-elements-of-varying-length-x-times-before-overflowing/69288739#69288739 pour l'overflow horizontal plutôt que vertical , pas l'affichage en colonnes

Cdt
Modifié par gcyrillus (03 Feb 2024 - 18:25)

Bonjoir,

J'ai finalement opté pour la solution multicolonne, avec un gros column-gap de 3em pour être sûr de ne pas se tromper de croix. C'est celle qui m'a paru la plus simple, et elle a l'air de bien marcher.
En bonus je peux mettre une ligne entre les colonnes, je ne sais pas si c'est très esthétique, mais ça aide encore davantage.
Ca me fait 2 ou 3 colonnes en mobile, de 3 à 5 sur PC. Ca me parait raisonnable.

Xirillus, avec ta version grid-auto-flow: column; j'ai l'impression qu'une scrollbar horizontale apparait quand il y a beaucoup d'éléments dans la liste. OU peut-être qu'il n'y a même pas de scrollbar, je ne sais pas.
Toujours est-il que j'ai des bounding client rect avec des x à plus de 2000. Du coup j'imagine que ça doit être un peu déroutant.
JE n'ai pas l'impression que le max-height: 75vh; est vraiment pris en compte, car si je le diminue à 25, c'est pareil.
Donc il y a un truc que j'ai dû rater.

Vos interventions m'ont quand même permis de comprendre qu'en fait, quand on passe en display: grid; c'est les enfants directs, et seulement les enfants directs, qui représentent les cellules.
Une veille réminiscence de la pensée en tableaux...
ET aussi, qu'on fixe forcément à un moment ou à un autre, d'une façon ou d'une autre, soit le nombre de colonnes, soit le nombre de lignes. C'est assez logique, car sinon l'algorithme automatique ne sait pas dans quelle direction aller,, mais c'est pas forcément évident tout de suite.

En outre, je pensais aussi que la définition de l'unité em était la largeur de la lettre m, et du coup comme c'est une des lettres les plus larges, par définition aussi plus ou moins le nombre de caractères dans le pire des cas.
Eh bien en fait, non ! Visiblement, un nom aléatoire de 25 caractères ne tient pas en entier sur une colonne fixée à 30em. Mais bon, c'est du détail, un pseudo fait 10 caractères en moyenne.

Enfin bref, merci à tous pour vos réponses. Je marque ce sujet comme résolu.
Modifié par QuentinC (07 Feb 2024 - 19:38)

Bonjour,

QuentinC a écrit :
Visiblement, un nom aléatoire de 25 caractères ne tient pas en entier sur une colonne fixée à 30em.

Normalement il tient. S'il ne tient pas, c'est qu'il y a autre chose dans la page, dans le css, ou peut-être dans le paramétrage du navigateur ou de la machine utilisée qui font que les caractères sont affichés plus gros.

Amicalement,