Bonjour,

J'ai un site WordPress, et j'utilise ContactForm7 pour différents formulaires. Sur certains formulaires, j'ai plusieurs champs disposés sur une ligne, en 2 ou 3 colonnes (c'est le seul moyen que j'ai trouvé pour afficher mes champs sur plusieurs colonnes, les options de mise en page du formulaire étant plutôt limitées). Dans Firefox, pas de problème. Dans Chrome, la dernière colonne tombe automatiquement à la ligne.

Ce à quoi ça devrait ressembler (ici dans Firefox):

Ce à quoi ça ressemble dans Chrome:

Le code entré dans back-end de WordPress, dans le plugin ContactForm7 (j'ai juste ajouté les <div> avec les id en gros)

<h2>Vos coordonnées</h2>

<div id="wpcf7_3_col">[text* Unternehmen placeholder "Votre raison sociale*"] [text* Vorname placeholder "Votre prénom*"] [text* Familienname placeholder "Votre nom de famille*"]</div>

<div id="wpcf7_1_col">[text* Adressee placeholder "Votre adresse*"]</div>

<div id="wpcf7_2_col">[text* Plz placeholder "NPA*"] [text* Wohnort placeholder "Votre localité*"]</div>

<div id="wpcf7_3_col">[text* Telefon placeholder "Votre numéro de téléphone*"] [email* E-MailAdresse placeholder "Votre adresse E-Mail*"] [text RoutiersID placeholder "Numéro de client / numéro de membre Routiers Suisses"]</div>

Et le CSS ajouté dans le champ de CSS personalisé de WordPress:

/*Layout control of input fields in Contact From 7*/
#wpcf7_1_col {
    margin: 15px 0px;
}
#wpcf7_2_col {
    column-count: 2;
    margin: 15px auto;
}
#wpcf7_3_col {
    column-count: 3;
    margin: 15px 0px;
}

Voilà, j'ai un peu cherché partout dans la gestion des colonnes en CSS, apparemment Chrome n'a pas toujours bien supporté les colonnes, mais d'après ce que j'ai lu, il semblerait que ce soit pris en charge depuis un certain temps maintenant. Après c'est très très possible que ça vienne de moi et de mes maigres connaissances

Merci d'avance!

Raphael

-
Edité par RaphaelGonin 17 février 2020 à 14:36:33

J'a trouvé la solution: hauteur de ligne fixe et la première colonne ne tombe pas sur deux lignes

/*Layout control of input fields in Contact From 7*/
#wpcf7_1_col {
    height: 40px;
}
#wpcf7_2_col {
    column-count: 2;
    column-gap: 15px;
    height: 40px;
}
#wpcf7_3_col {
    column-count: 3;
    column-gap: 15px;
    height: 40px;
}