Affichage des formulaires formidable

Général
#1

Bonjour,

j’ai un problème d’affichage des formulaires créés avec Formidable sur mon site.
Dans l’espace privé, la prévisualisation est parfaite : sous parties, alignement, etc…
image

mais sur le site public, tout est moche : le label des cases à cocher est sur une ligne différente de la case à cocher, pas de sous-aprties, etc…

Une idée de ce qu’il faut que je recherche ?

#2

image
image495×830 23.1 KB

#3

Le plugin ne gère absolument pas de styles (sauf les styles fonctionnels pour masquer afficher certaines choses). Le HTML généré suit les conventions de structure et nommage des classes de SPIP, ce pourquoi ça s’affiche proprement comme tout formulaire dans l’admin. Mais dans ton site public, c’est à ton thème graphique de gérer correctement l’affichage des formulaires SPIP en général : ce n’est pas propre à Formidable, ça vaut pour n’importe quels formulaires qui seraient affichés en public.

Il faut gérer notamment les fieldset.editer (contenant les cases et radios), les .choix, etc.

–
RastaPopoulos

#4

Ok, je n’avais pas compris ça en effet…

Par hasard, il y a des exemple de css « basiques » qui reproduiraient l’affichage de l’admin ?

#5

Voici ce que j’utilise dans mon plugin-squelette, ça te fera dèjà une base de travail.

/**********************************************/
/* personnalisation du plugin Formidable       */
/**********************************************/
.formulaire_formidable .editer-groupe{
	padding: 10px 0;
	border-radius: 10px;
}

.formulaire_formidable .editer {
	padding: .5em 10px;
	clear: both;
	overflow: hidden;
	margin: 10px;
	background: white;
	border-radius: 10px;
}
.formulaire_formidable .editer label,
.formulaire_formidable .editer.gauche label {
	display: block;
	hyphens: none;
}
.formulaire_formidable .editer label {
	text-align: left;
	font-weight: bold;
	width: 100%;
}
.formulaire_formidable .editer input,
.formulaire_formidable .editer select,
.formulaire_formidable .editer textarea,
.formulaire_formidable .editer .explication {
	max-width: 79%;
	margin-left: 19%;
	margin-top: 1px;
	margin-bottom: 5px;
}
.formulaire_formidable .markItUpHeader {
	max-width: 79%;
	margin-left: 19%;
}
.formulaire_formidable .editer .explication {
	background: #efefef;
	padding: 5px;
	border-radius: 5px;
}
.formulaire_formidable .editer input,
.formulaire_formidable .editer select {
	float: left;
}

.formulaire_formidable .editer textarea {
	width: 100%;
}
.formulaire_formidable .choix {
	clear: both;
}
.formulaire_formidable .choix .file {
	margin-left: 30%;
}
.formulaire_formidable .boutons {
	text-align: right;
}
.formulaire_formidable .boutons .submit {
	margin-right: 40px;
	margin-bottom: 20px;
	padding: 5px 10px;
	font-size: 1.5rem;
	font-weight: bold;
}
1 « J'aime »
#6

Pour info, la dist (les squelettes par défaut), gèrent ça très bien cf dist/spip.css at master - dist - SPIP on GIT

Quel squelette utilise ton site ? Quelle est l’adresse de la page exposant le problème ?

#7

Je reagrde ça aussi, merci.
Le site utilise le squelette Sendagi ==> Demande de diagnostic assainissement - Siarec par exemple

#8

Ha ben tu as de la chance, j’ai proposé un correctif pour ça il y a quelques jours et la dernière version de sendagi corrige ce bug #3 - Problème CSS avec les labels dans les choix - sendagi - SPIP on GIT :slight_smile: