Modifications entre les versions 2 et 5 (s'étendant sur 3 versions)

Cette page présente quelques informations utiles à la conception des formulaires avec le w.c.s installé à l'AuF.

Classes supplémentaires

Techniquement elles sont rendues disponibles via une feuille de style AuF.

Voici un tableau des classes disponibles :

Classe CSS	Fonction / Utilité
`left`	Positionne le champ contre le bord gauche.
`right`	Positionne le champ contre le bord droit.
`width20`	Donne au champ une largeur de 20%.
`width24`	Donne au champ une largeur de 24%.
`width25`	Donne au champ une largeur de 25%.
`width29`	Donne au champ une largeur de 29%.
`width30`	Donne au champ une largeur de 30%.
`width34`	Donne au champ une largeur de 34%.
`width39`	Donne au champ une largeur de 39%.
`width45`	Donne au champ une largeur de 45%.
`width49`	Donne au champ une largeur de 49%.
`width50`	Donne au champ une largeur de 50%.
`width60`	Donne au champ une largeur de 60%.
`width65`	Donne au champ une largeur de 65%.
`width70`	Donne au champ une largeur de 70%.
`width75`	Donne au champ une largeur de 75%.
`width80`	Donne au champ une largeur de 80%.
`width99`	Donne au champ une largeur de 99%.
`width100`	Donne au champ une largeur de 100%.
`widthauto`	Donne au champ une largeur automatique, qui s'adaptera en fonction de l'espace disponible.
`to_left`	Positionne le champ contre le bord gauche, avec une largeur de 45%.
`to_right`	Positionne le champ 50% du bord gauche, avec une largeur de 45%.
`to_right2`	Positionne le champ 25% du bord gauche, avec une largeur de 20%.
`to_right60`	Positionne le champ 25% du bord gauche, avec une largeur de 60%.
`to_right70`	Positionne le champ 25% du bord gauche, avec une largeur de 70%.
`leftmargin2`	Donne à la marge de gauche une largeur de 2%.
`border`	Ajoute une bordure en pointillés de couleur rouge tout autour du champ.
`readonly`	Rend le champ visiblement non modifiable.
`long-radio`	Place les choix sous leur titre au lieu de sur la même ligne.

Notes :

on peut combiner plusieurs classes en les mettant à la suite l'une de l'autre, par exemple : left width49 border
les champs avec une classe de type right doivent être placés, dans l'ordre des champs d'un formulaire, avant les champs qui seront à leur gauche (ne pas me demander pourquoi… ça s'explique mais bon…)
on peut créer d'autres classes au besoin, pour ce faire contacter l'administrateur du site w.c.s concerné

Historique :

2013-06-11 : reprise de la classe long-radio directement dans wcs.css (merci EricMcSween ?)

div.RadiobuttonsWidget.long-radio div.content,
div.RadiobuttonsWidget.long-radio div.title { display: block; }

2013-06-11 : adaptation de la hauteur du titre #top h1, autrefois en height: 100px pour passer en min-height: 100px (JC)

Etude/WCS/ConceptionDeFormulaire (dernière édition le 2013-06-11 16:15:09 par JeanChristopheAndré)

-  ⇤ ← Version 2 à la date du 2011-03-17 18:00:51 → 
  Taille: 2860
  Éditeur: JeanChristopheAndré
  Commentaire: site officiel…
+   ← Version 5 à la date du 2013-06-11 16:15:09 → ⇥
  Taille: 3332
  Éditeur: JeanChristopheAndré
  Commentaire: améliorations
-Texte supprimé.
+Texte ajouté.
 Ligne 10:
-||<(> `left`        || Positionne un champ contre le bord gauche. ||
||<(> `right`       || Positionne un champ contre le bord droit. ||
+||<(> `left`        || Positionne le champ contre le bord gauche. ||
||<(> `right`       || Positionne le champ contre le bord droit. ||
 Ligne 30:
-||<(> `to_left`     || Positionne un champ contre le bord gauche, avec une largeur de 45%. ||
||<(> `to_right`    || Positionne un champ 50% du bord gauche, avec une largeur de 45%. ||
||<(> `to_right2`   || Positionne un champ 25% du bord gauche, avec une largeur de 20%. ||
||<(> `to_right60`  || Positionne un champ 25% du bord gauche, avec une largeur de 60%. ||
||<(> `to_right70`  || Positionne un champ 25% du bord gauche, avec une largeur de 70%. ||
+||<(> `to_left`     || Positionne le champ contre le bord gauche, avec une largeur de 45%. ||
||<(> `to_right`    || Positionne le champ 50% du bord gauche, avec une largeur de 45%. ||
||<(> `to_right2`   || Positionne le champ 25% du bord gauche, avec une largeur de 20%. ||
||<(> `to_right60`  || Positionne le champ 25% du bord gauche, avec une largeur de 60%. ||
||<(> `to_right70`  || Positionne le champ 25% du bord gauche, avec une largeur de 70%. ||
 Ligne 37:
-||<(> `readonly`    || Rend un champ visiblement non modifiable. ||
+||<(> `readonly`    || Rend le champ visiblement non modifiable. ||
||<(> `long-radio`  || Place les choix sous leur titre au lieu de sur la même ligne. ||
-Ligne 41:
+Ligne 43:
- * les champs avec une classe de type `right` doivent être placé, dans l'ordre des champs d'un formulaire, avant les champs qui seront à leur gauche (ne pas [[ProgFou|me]] demande pourquoi… ça s'explique mais bon…)
 * on peut en créer d'autres au besoin, pour ce faire contacter l'administrateur du site utilisant w.c.s
+ * les champs avec une classe de type `right` doivent être placés, dans l'ordre des champs d'un formulaire, avant les champs qui seront à leur gauche (ne pas [[ProgFou|me]] demander pourquoi… ça s'explique mais bon…)
 * on peut créer d'autres classes au besoin, pour ce faire contacter l'administrateur du site w.c.s concerné

Historique :
 * 2013-06-11 : reprise de la classe `long-radio` directement dans `wcs.css` (merci EricMcSween ?)
 . {{{
div.RadiobuttonsWidget.long-radio div.content,
div.RadiobuttonsWidget.long-radio div.title { display: block; }
}}}
 * 2013-06-11 : adaptation de la hauteur du titre `#top h1`, autrefois en `height: 100px` pour passer en `min-height: 100px` (JC)

WikiTeki / Modifications de « Etude/WCS/ConceptionDeFormulaire »

Classes supplémentaires