panelGroup 内的 JSF 组件对齐
JSF Components alignment inside panelGroup
我有一个 selectOneRadio 元素,在 dataTable 中带有 layout="custom"。下面是xhtml代码-
<p:dataTable var="varlist" value="#{testbean.testlist}">
<p:column headerText="Choose Option" width="120">
<p:selectOneRadio id="customRadio" value="#{varlist.varlistValue}"
layout="custom" required="true">
<f:selectItem itemValue="10" />
<f:selectItem itemValue="20" />
</p:selectOneRadio>
<h:panelGrid columns="1">
<h:panelGroup>
<p:radioButton id="opt1" for="customRadio" itemIndex="0" />
<h:outputLabel for="opt1" value="OPTION 1" styleClass="radiolabelOption"/>
</h:panelGroup>
<h:panelGroup>
<p:radioButton id="opt2" for="customRadio" itemIndex="1" />
<h:outputLabel for="opt2" value="OPTION 2" styleClass="radiolabelOption"/>
</h:panelGroup>
</h:panelGrid>
</p:column>
</p:dataTable>
<style type="text/css">
.radiolabelOption {
margin-left: 10px;
}
</style>
这是它在浏览器中的显示方式-
正如我们所见,outputLabel 相对于 radioButton 出现在底部。但我希望 看起来像中心 、w.r.t radioButton 如下所示 -
我尝试了下面的代码行,例如
style="display:block; text-align:center" OR
style="margin: 0 auto;"
但是其中 none 个产生了预期的结果。
那么怎么做呢?
给<h:panelGroup>
这些样式
.panelGroup{
display: flex;
align-items: center;
}
我有一个 selectOneRadio 元素,在 dataTable 中带有 layout="custom"。下面是xhtml代码-
<p:dataTable var="varlist" value="#{testbean.testlist}">
<p:column headerText="Choose Option" width="120">
<p:selectOneRadio id="customRadio" value="#{varlist.varlistValue}"
layout="custom" required="true">
<f:selectItem itemValue="10" />
<f:selectItem itemValue="20" />
</p:selectOneRadio>
<h:panelGrid columns="1">
<h:panelGroup>
<p:radioButton id="opt1" for="customRadio" itemIndex="0" />
<h:outputLabel for="opt1" value="OPTION 1" styleClass="radiolabelOption"/>
</h:panelGroup>
<h:panelGroup>
<p:radioButton id="opt2" for="customRadio" itemIndex="1" />
<h:outputLabel for="opt2" value="OPTION 2" styleClass="radiolabelOption"/>
</h:panelGroup>
</h:panelGrid>
</p:column>
</p:dataTable>
<style type="text/css">
.radiolabelOption {
margin-left: 10px;
}
</style>
这是它在浏览器中的显示方式-
正如我们所见,outputLabel 相对于 radioButton 出现在底部。但我希望 看起来像中心 、w.r.t radioButton 如下所示 -
我尝试了下面的代码行,例如
style="display:block; text-align:center" OR
style="margin: 0 auto;"
但是其中 none 个产生了预期的结果。
那么怎么做呢?
给<h:panelGroup>
这些样式
.panelGroup{
display: flex;
align-items: center;
}