Comment personnaliser la mise en page h: selectOneRadio
le layout de H: selectOneRadio peut être horizontal ou vertical, il y a donc un moyen que je puisse faire un layout personnalisé. Par exemple, au lieu d'afficher 8 bouton radio, affichage 2 lignes avec 4 sur chaque ligne? Veuillez fournir votre réponse à côté de PrimeFaces P: selectOneRadio solution, il utiliser CSS3 provoquant IE8 pour afficher le bouton radio en forme de rectangle.
1 réponses
ce n'est pas exactement cela, mais vous pouvez utiliser Tomahawk <t:selectOneRadio>
avec l'attribut layout
défini à "spread"
pour avoir un rendu markupless des boutons radio. Vous pouvez alors utiliser <t:radio>
pour placer les différents boutons radio dans le markup comme vous le souhaitez, comme dans un <h:panelGrid columns="4">
.
E. G.
<t:selectOneRadio id="foo" value="#{bean.selectedItem}" layout="spread">
<f:selectItems value="#{bean.availableItems}" />
</t:selectOneRadio>
<h:panelGrid columns="4">
<t:radio for="foo" index="0" />
<t:radio for="foo" index="1" />
<t:radio for="foo" index="2" />
<t:radio for="foo" index="3" />
<t:radio for="foo" index="4" />
<t:radio for="foo" index="5" />
<t:radio for="foo" index="6" />
<t:radio for="foo" index="7" />
</h:panelGrid>
ou même lorsque le montant de boutons radio est non spécifié
<h:panelGrid columns="4">
<c:forEach items="#{bean.availableItems}" varStatus="loop">
<t:radio for="foo" index="#{loop.index}" />
</c:forEach>
</h:panelGrid>
(notez que <ui:repeat>
n'est pas adapté car il s'exécute pendant le rendu de la vue et se termine ainsi comme une seule colonne de <h:panelGrid>
, vous auriez besoin d'utiliser le HTML simple <table>
à la place)