Lorsque dans une page JSPX ou un fragment JSFF, on utilise le composant af:selectOneRadio horizontalement, la valeur par défaut de l’espace entre les labels du composant les font apparaître très compacts. La modification de l’espace entre 2 labels du composant af:selectOneRadio n’étant pas possible directement à partir des propriétés du composant (onglet « Inspector »), il ne reste que la création d’une Class CSS pour définir cet espace. La méthode décrite ci-dessous consiste à créer cette Class puis à l’affecter au composant af:selectOneRadio
- Création de la Class CSS
Insérer la Class ci-dessous dans le fichier CSS
.selectTableRadio label{ padding: 15px; }
Dans cet exemple, 15px représente la taille de l’espace qui sera insérée entre 2 labels.
- Modification de l’attribut styleClass du composant: af:selectOneRadio
<af:selectOneRadio id="sor1" ... styleClass="selectTableRadio"> <af:selectItem ..... />
- Exemple
Dans l’extrait du code source de la page ci-dessous, toutes les balises « label » seront impactées par la propriété « label » (padding 15px) de la Class CSS selectTableRadio :
<div id="pt1:r1:0:radioSelectView::content" theme="medium" name="pt1:r1:0:radioSelectView"> <span theme="medium"> <label theme="medium" for="pt1:r1:0:radioSelectView:_1">Label 1</label> <span theme="medium"> <label theme="medium" for="pt1:r1:0:radioSelectView:_2">Label 2</label> </div>