Présentation d'options énumérées (cases à cocher) sur 3 colonnes

Bonjour,
j’essaye de configurer un affichage d’options énumérées (liste de cases à cocher d’environ 20 options) sur 3 colonnes en vertical.

J’ai essayé de configurer le rendu en vertical ou horizontal avec une précision de 3 (cf. nombre de colonnes souhaité) mais ça ne s’affiche pas comme je l’escomptais:

En affichage vertical, je n’ai qu’une seule colonne et en affichage horizontal, j’ai tout sur une colonne “autowrappée” apparemment…

Comment puis-je faire pour obtenir le rendu souhaité?

Simplicité version4.0 patch level P24Built on2020-04-24 22:35 (revision 3fe76ae912e69f249470c97013574fce47b7e1d2)Database levelP24;b7dbe03d2e7a1bfd957e9cd13e0f4a0bEncodingUTF-8 (system encoding UTF-8)

J’ai trouvé une solution de style dans le template…

		<style>
			div[data-group='DataprocessSubjects'] > div > div > div.form-control { column-count: 3; column-gap: 2rem; list-style: none; }
		</style>
		<div class="field col-sm-12" data-field="DataprocessSubjects"></div>

Est-il possible de prendre en compte la configuration du modèle (vertical, 3 colonnes) nativement ou bien y-a-t-il des cas particuliers que je ne vois pas…

La précision du champ n’est pas implémentée et c’est effectivement un “wrap” qui est appliqué en mode horizontal.

Il faut ajouter du CSS dans la resource STYLES pour forcer un affichage en colonnes à hauteur fixe au niveau du conteneur d’items, du style :

.objform.object-MyObject .field[data-field='myFieldEnumMulti'] .form-control {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 75px;
}

Ca donnera ça par exemple :

image

Sinon pour faire du wrap horizontal, il faudra forcer une largeur à chaque item, comme par exemple pour faire 3 colonnes :

.objform.object-MyObject .field[data-field='myFieldEnumMulti'] .form-control {
    display: flex;
    flex-wrap: wrap;
    > * { width: 30%; }
}

Attention, oui on peut faire du CSS sans être trop précis sur la structure DOM car elle pourra varier entre version, il est préférable d’utiliser les classes internes qui seront pérennes pour cibler les objets.

.objform [data-field='DataprocessSubjects'] .form-control { ... }

Effectivement on peut regarder pour implémenter la précision sur ce type de champ.

C’est une régression vis à vis de la UI legacy qui gérait la précision dans ce cas.

@Francois est-ce compliqué à ajouter à la UI responsive ?

Non ça doit pas être difficile, de mémoire la legacy faisait un truc pas du tout responsive.
mais maintenant on a les flexbox !

Oui bien sur, je ne parle pas de la manière dont la legacy faisait les choses (ce qui était forcément old school) mais de la fonctionnalité UI qui consistait a avoir les checkboxes et radio buttons disposées en colonnes en fct de la précision. J’imagine qu’on peut faire mieux en responsive.

Mon point c’est de rendre le service par paramétrage comme sur la UI legacy sans devoir passer par des hacks CSS non garantis dans le temps.

1 Like

Merci beaucoup à tous les deux.
@françois, en attendant le graal flexible, j’ai corrigé la chaîne de sélection CSS selon ta préconisation.

Ok je regarde ça, j’avais un truc sur le feu mais ça peut attendre.

Et sinon mon propos est que le low-code est aussi autorisé au niveau CSS dès lors qu’on utilise des selectors stables = garantis dans le temps. On ne peut pas garantir bootstrap, mais nos classes CSS oui, tout comme nos hooks.