Project

General

Profile

Support #41889

conserver l'ordre des boutons même si un des boutons n'est pas affiché

Added by Serghei Mihai 3 months ago. Updated 3 months ago.

Status:
Nouveau
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
20 Apr 2020
Due date:
% Done:

0%

Patch proposed:
No
Planning:
No

Description

Typiquement sur l'alignement du bouton "précedent" à gauche et les autres à droite:

$buttons-order: previous (grow), cancel, submit

sur la première page du formulaire, ou le bouton "précedent" n'existe pas, les autres sont alignés à gauche.

Il faudrait les garder à droite.


Related issues

Related to Intégrations graphiques Publik - Development #41720: thème pour le département de la Dordogne Solution déployée 14 Apr 2020

History

#1 Updated by Serghei Mihai 3 months ago

#2 Updated by Thomas Jund 3 months ago

Dans l'état, il faudrait déconseiller de mettre l'option `(grow)` sur le bouton `previous` qui n'est pas systématiquement présent (mise à jour de la doc).

Sinon, comme propositions :

  • faire en sorte que previous soit toujours présent dans le code, mais avec un attribut `disabled` dessus (et son container du coup) et masquer ou non ce bouton à l'aide d'un `display:none`. Et si option (grow) est placé dessus, mettre à la place un visibility: hidden,
  • soit trouver une solution pur CSS que je n'entrevois pas encore.

#3 Updated by Frédéric Péters 3 months ago

Il me semblait que de l'autre côté il y avait un contournement qui marchait ?

#4 Updated by Thomas Jund 3 months ago

Il me semblait que de l'autre côté il y avait un contournement qui marchait ?

Dans un cas spécifique, oui. Et c'était une mauvaise idée, conseiller la modification de $buttons-alignment aurait été préférable :

Je récapitule pour flex-start et flex-end,
si l'option (grow) est placé sur le bouton previous, quand il n'est pas présent, la position des boutons qui l'entourent peuvent être modifiés

1/ l'alignement des boutons est en `flex-start`

Quand le bouton previous est en 1ère ou 2e position

previous (grow), cancel, submit
ou
cancel, previous (grow), submit

Alors le⋅s bouton⋅s placés APRÈS `previous` perdent leur positionnement à droite quand previous n'est pas présent et repassent à gauche

1/ l'alignement des boutons est en `flex-end`

Alors c'est l'inverse
Quand le bouton previous est en 2e ou 3e position
Alors le⋅s bouton⋅s placés AVANT `previous` perdent leur positionnement à gauche quand previous n'est pas présent et passent à droite.


Exemple 1. Previous position 1.
Dans le cas de la Dordogne où l'affichage doit être

previous --> cancel Submit

Il faut donc utiliser

$buttons-order: previous, cancel (grow), submit;
$buttons-alignment: flex-end

ET pas

$buttons-order: previous (grow), cancel, submit;
$buttons-alignment: flex-start // default

Exemple 2, previous position 2.
Dans le cas où on souhaite

cancel previous --> Submmit

Idem, La solution est d'aligner à droite et de faire un grow sur Submit

$buttons-order: cancel, previous, submit (grow);
$buttons-alignment: flex-end

Après avoir détaillé tout ça, pour moi, déconseiller l'utilisation de l'option grow sur previous devrait suffire.
Par contre, que le bouton soit présent dans le code avec l'option 'visibity;:hidden' permettrait quand même de pouvoir 'conserver' l'emplacement du bouton dans d'autres configurations d'alignement (center, space-between) et rendrait les options de placement moins confus.

#5 Updated by Frédéric Péters 3 months ago

Je ne comprends toujours pas, mais c'est sans doute parce que ce ticket a été créé trop générique.

Du cas Dordogne, qui posait : $buttons-order: previous (grow), cancel, submit;

À ça on dit "dans ce cas précis il faut également poser telle ou telle option".

Et j'imaginais ce ticket comme étant mettre dans le code le "dans ce cas précis également poser telle ou telle option".

(...) déconseiller l'utilisation de l'option grow sur previous devrait suffire

En l'état elle ne produit pas, seule, un comportement convenable.

Est-ce qu'il y a des moments où elle produit un comportement qui serait souhaité ?

Si oui, mais en combinaison avec d'autres options, a-t-on de quoi les poser ?

Si non, a-t-on de quoi interdire le previous (grow) ?

#6 Updated by Thomas Jund 3 months ago

  • Subject changed from consérver l'ordre des boutons même si un des boutons n'est pas affché to conserver l'ordre des boutons même si un des boutons n'est pas affiché

Je ne comprends toujours pas
Du cas Dordogne, qui posait : $buttons-order: previous (grow), cancel, submit;
À ça on dit "dans ce cas précis il faut également poser telle ou telle option".

Moi j'ai proposé (https://dev.entrouvert.org/issues/41720#note-5), pour conserver le même design, de déplacer l'option grow sur le bouton cancel et de modifier l'alignement. Exactement l'exemple 1 présenté au dessus.

Poser un flex-grow sur un flex-child qui disparaît est en effet une mauvaise idée.
Et pour me répéter encore, de mon point de vue :

  • Soit on garde le code en l'état qui permet toutes les possibilités de layout mais on ne permet plus (on déconseille) l'utilisation de l'option grow sur previous. Ce qui oblige l'intégrateur à jouer avec les options d'alignement un peu plus souvent. Et on peu en effet éviter d'appliquer un flex-grow sur previous
  • Soit une solution du coté du code HTML : ne pas supprimer 'previous' du code. Qui a largement ma préférence.

Also available in: Atom PDF