JSFラジオボタンカスタムラベルとテーブルレイアウトを取る

Question

私はJSFプロではありません、私はHTML/CSS/JSのレイアウトをしています。しかし、私はJava開発者がフォーム、特にラジオボタンの問題に直面しています。あなたが見ることができるように

、ほとんどすべてが今、私たちが直面している主要な問題があることで、カスタム、ラジオボタン、入力選択ボックス...

である：ここでは最後にしたいレイアウトがありますJSFフレームワークは自動的にテーブルにすべてのものを出力します（私はデザイナーが最初に好きではない）。次に、ラジオボタン用のカスタムラベルも必要です。

私は別のものの束を試みたが、私はあなたに、ここでのコードの基本的な例をあげる：これを行うための別の方法はあり

<h:selectOneRadio value="#{user.favColor1}"> 
     <f:selectItem itemValue="Red" itemLabel="Color1 - Red" /> 
     <f:selectItem itemValue="Green" itemLabel="Color1 - Green" /> 
     <f:selectItem itemValue="Blue">A really custom label is here with <select><option>1</option></select></f:selectItem> 
    </h:selectOneRadio> 

を？私たちは間違っているのですか？どうやってこのようなことができるのか知っていますか？

ありがとうございます！ JSFでは

Answer 1

あなたはこのようにラジオグループのスタイルを設定することができます

.myRadioGroup input { 
    float: left; 
    margin-left: -13px; 
    margin-top: 3px; 
} 

.myRadioGroup label { 
    margin-left: 12px; 
    display: block; 
} 

<h:selectOneRadio value="#{user.favColor1}" styleClass="myRadioGroup"> 
     <f:selectItem itemValue="Red" itemLabel="Color1 - Red" /> 
     <f:selectItem itemValue="Green" itemLabel="Color1 - Green" /> 
     <f:selectItem itemValue="Blue">A really custom label is here with <select><option>1</option></select></f:selectItem> 
</h:selectOneRadio> 

Answer 2

PrimeFacesは、あなたが彼らの例でも同じように見えますSelectOneRadio - Custom Layout

<h3>Custom Layout</h3> 
<p:outputPanel id="customPanel" style="margin-bottom:10px"> 
    <p:selectOneRadio id="customRadio" value="#{radioView.color}" layout="custom"> 
     <f:selectItem itemLabel="Red" itemValue="Red" /> 
     <f:selectItem itemLabel="Green" itemValue="Green" /> 
     <f:selectItem itemLabel="Blue" itemValue="Blue" /> 
    </p:selectOneRadio> 

    <h:panelGrid columns="3" cellpadding="5"> 
     <p:radioButton id="opt1" for="customRadio" itemIndex="0" /> 
     <h:outputLabel for="opt1" value="Red" /> 
     <p:spinner /> 

     <p:radioButton id="opt2" for="customRadio" itemIndex="1" /> 
     <h:outputLabel for="opt2" value="Green" /> 
     <p:inputText /> 

     <p:radioButton id="opt3" for="customRadio" itemIndex="2" /> 
     <h:outputLabel for="opt3" value="Blue" /> 
     <p:calendar /> 
    </h:panelGrid> 
</p:outputPanel> 

を見てみましょう

を探している正確なコンポーネントを得ましたあなた（ラジオの隣のスピナー）