Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Mise en page formulaire

Michel Suquet
le 21 janvier 2018
à 19:39
Rappel du sujet :

Bonjour,

en septembre, vous m’aviez aidé pour la mise en page d’un formulaire dans un article pour le site de la régionale mon association.

J’ai à nouveau un problème de mise en page toujours dans un formulaire mais cette fois-ci pour des boutons radio oui/non : les oui et non ne sont pas bien placés comme vous pouvez le voir sur la page (en cours d’élaboration).

J’avais mis ceci, en suivant vos conseils, dans le fichier perso.css :

/* améliorations des formulaires de Formidable */
.formulaire_formidable textarea, .formulaire_formidable label{
     display: block;
}
.formulaire_formidable textarea,
.formulaire_formidable select,
.formulaire_formidable input{
     margin-left: 150px
}

Que faudrait-il rajouter ?

Cordialement,

Michel Suquet

Mise en page formulaire

Hello

Rajoute ça dans ton perso.css, ça devrait le faire.

.formulaire_formidable .choix label {
        display: inline-block;
}
Mise en page formulaire

Merci, cela fonctionne. Et je me disais bien que ce serait mieux que les oui/non soient après les boutons que devant : parfait !

J’en profite pour te souhaiter une bonne année.

J’ai vu aussi que la version 4 était sortie mais comme le site escal.ac-lyon.fr est toujours en version 3, j’attends pour mettre à jour : j’aime bien voir la différence sur le site de démo 😉

Cordialement,

Michel Suquet

Mise en page formulaire

Oui ce site va bientôt passer en spip3.2 et donc avec escalv4.

Mais néanmoins, le site spipfactory est en spip3.2/escalV4. Je suis assez content des blocs en une dont la hauteur et la largeur s’adapte et aussi de la page contact.

Mise en page formulaire

Bonjour,

je reviens sur ce problème de mise en page du formulaire car, comme le squelette Escal a évolué pour cette mise en page d’après vos messages récents, j’ai supprimé les personnalisations concernant les formulaires dans le fichier perso.css et finalement cela donne la même chose (j’ai vidé les caches pour le voir).

Cependant, il y a des coupures de mots dans le formulaire qui ne sont pas très agréables de mon point de vue (même avec les règles css que j’ai enlevées). Par exemple les mentions telles que obligatoire ou facultatif… sont coupées et la suite est alignée à gauche. Pour voir : article ayant un formulaire sur notre site.

Peut-on faire en sorte qu’il n’y ait pas de coupure dans les formulaires ? Quelle règle css faut-il mentionner pour que cela n’ait lieu que pour les formulaires.

Je vous souhaite une bonne année.

Michel Suquet

Mise en page de formulaires

Hello

Oui, en effet ce n’est pas top !
Je vais livrer une correction avec la déclaration CSS qui va bien.
C’est à dire : hyphens: none

Mise en page formulaire

Je viens de faire la mise à jour : parfait !

Il y a bien entendu des effets de bords car certains mots débordent mais je vais modifier les textes pour éviter les débordements, ou bien élargir la zone texte des formulaires…

Merci pour cette modif’ !

Bonne soirée,

Michel Suquet

Mise en page formulaire

Bonjour,

on vient de mettre en ligne un nouveau formulaire avec, cette fois-ci un champ avec des cases à cocher : une case pour oui, une case pour non.

Cependant, les deux cases sont en dessous et je pense que ce serait mieux si elles étaient à la suite. Cela est-il possible ? Quelle règle css faut-il ajouter ?

Cordialement,

Michel Suquet

Mise en page de formulaires

Hello

Pour être sur de ne rien casser ailleurs, on va cibler précisément ce formulaire.
Voici ce que ça donne :

#formulaire_formidable-7 .editer_checkbox_1 .choix{
     display: inline;
}
#formulaire_formidable-7 .editer_checkbox_1 .choix input{
     float: left;
}
#formulaire_formidable-7 .editer_checkbox_1 .choix label{
     text-align: left;
     width: auto;
}
Mise en page formulaire

Bonsoir Jean-Christophe,

Cela fonctionne comme tu peux le voir sur la page correspondante. Les deux cases oui/non sont en ligne au lieu d’être en colonne comme auparavant, mais pourquoi pas !

Merci pour l’aide en css 🙂

Cordialement,

Michel Suquet

Réagir au sujet
Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.
Attention ! Si votre message contient un lien, il devra être validé par le webmestre. Inutile de le poster à nouveau ;-)

Ajouter un document

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2025 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 5.2.14