Ergonomie - visualisation des onglets en tête de formulaire

Bonjour,

J'ai intégré dans mon formulaire le widget "onglets de formulaire".

Cependant, celui-ci ne s'affiche pas de manière très ergonomique : les onglets sont les un en dessous des autres, avec des longueurs différentes...

Je souhaiterai pouvoir les mettre tous en ligne les un après les autres (pour visualiser un processus pour la personne qui va compléter le formulaire)

Je souhaiterai aussi pouvoir changer leur couleur

Comment faire ces 2 actions ?

Merci par avance

Rebonjour,

Cela est possible en utilisant du CSS personnalisé que nous pouvons faire pour vous.

Il y une chose a garder à l'esprit, c'est qu'il ne sera pas possible de tous les aligner sur une seule ligne, de part la longueur du texte.

Une idée que j'ai en tête serait d'en faire une sorte de tableau. Un onglet prends 50%, l'autre prends les 50% restant de la largeur, et on met la suite en dessous:

1 2

3 4

5 6

7 8

Relecture

Est-ce que cela vous conviendrait?

Bien à vous

Bonjour ,

Merci pour votre réponse. OK pour la proposition que vous faîtes, cela nous convient.

Quand cela pourra-t-il être fait ?

Merci d'avance

Cordialement,

Bonjour,

Le code est fait, il ne me manquera que la couleur que vous souhaitez.

Le code est a mettre dans le widget:

Voici le code a copier-coller dans ce dernier:

.tabs-list.tiffanyblue {

text-transform: uppercase;

padding: 0;

}

.tabs-list {

list-style: none;

padding: 0 15px;

display: flex;

flex-direction: row;

flex-wrap: wrap;

margin: 0;;

}

.tabs-list li {

text-align: center;

height: 30px !important;

font-size: 14px;

line-height: 23px;

display: flex;

margin: 0 16px -1px 0px;

height: 22px;

position: relative;

z-index: 2;

flex: 50% !important;

flex-basis: 100%;

flex-direction: column;

white-space: nowrap;

width: 50%;

}

@media only screen and (max-width: 600px) {

.tabs-list.tiffanyblue {

text-transform: uppercase;

padding: 0;

}

.tabs-list {

list-style: none;

padding: 0 15px;

display: flex;

flex-direction: row;

flex-wrap: wrap;

margin: 0;;

}

.tabs-list li {

text-align: center;

height: 30px !important;

font-size: 14px;

line-height: 23px;

display: flex;

margin: 0 16px -1px 0px;

height: 22px;

position: relative;

z-index: 2;

flex: 100% !important;

flex-basis: 100%;

flex-direction: column;

white-space: nowrap;

width: 100%;

}

}

Bien à vous