H：selectOneRadio HTML輸出JSF 1.1 VS 2.0

對於像吹一個selectOneRadio代碼：H：selectOneRadio HTML輸出JSF 1.1 VS 2.0

<h:selectOneRadio value="#{myBean.selectedItem}" enabledClass="selectOneRadio" disabledClass="selectOneRadio"> 
    <f:selectItem itemLabel="#{myBean.item.label}" itemValue="#{myBean.item.code}"/> 
</h:selectOneRadio>

JSF 1.1似乎會產生HTML輸出象下面這樣：

... 
<td><label><input type="radio" ...>text text text text ...... </label></td> 
...

但在JSF 2.0 ，它似乎正在生成如下的HTML輸出：

... 
<td><input type="radio" ...><label>text text text text ...... </label></td> 
...

在JSF 1.1中，我使用如下所示的css樣式來對齊超過一行的長標籤文本。但是這個CSS風格似乎並沒有工作JSF 2.0的HTML輸出。

.selectOneRadio 
{ display:block; 
    text-indent: -25px; 
    margin-left: 22px; 
}

有什麼我可以做，使JSF 2.0產生像JSF 1.1的輸出還是有一個CSS將用於JSF 2.0輸出工作？

來源

2014-01-13 HockChai Lim

我創建了一個的jsfiddle，看看是否有人能幫助我的CSS解決方案：http://jsfiddle.net/8j7dK/。基本上我需要標籤與單選按鈕位於同一行。如果我刪除了display：inline-block，則標籤的第2行不與第一行文本對齊。 –

得到它做這個工作：

.selectOneRadio input { 
    vertical-align: top; 
} 

.selectOneRadioLabel { 
    width: 120px; /* width has to set at the label. It won't work if set at table label */ 
    text-align:left; 
    margin-left:4px; 
    display: inline-block; 
} 
<h:selectOneRadio value="#{myBean.selectedItem}" style="selectOneRadio" enabledClass="selectOneRadioLabel" disabledClass="selectOneRadioLabel"> 
    <f:selectItem itemLabel="#{myBean.item.label}" itemValue="#{myBean.item.code}"/> 
</h:selectOneRadio>

來源

2014-01-14 16:50:53

H：selectOneRadio HTML輸出JSF 1.1 VS 2.0

回答

相關問題