Comment modifer l'espace entre 2 labels d'un SelectOneRadio horizontal ?

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>

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *