With richfaces, how can I get my h:outputLabel
and rich:combobox
components to display directly adjacent to each other on the same line?
Here are the two approaches I've tried.
#1 rich:Layout I first tried using
rich:layout
& rich:layoutPanel
, but the components appear on separate lines. Here's the code:
<rich:layout>
<rich:layoutPanel position="left" width="100%">
<h:outputLabel for="timeSpanUn开发者_开发技巧itsCombo2" value="Time Span " />
<rich:comboBox id="timeSpanUnitsCombo2" value="#{bean.timeSpanUnitsLabel}" enableManualInput="false">
<f:selectItems value="#{bean.timeSpanUnitsList}" />
</rich:comboBox>
</rich:layoutPanel>
</rich:layout>
And here's the rendered output:
#2 h:panelGrid Next I tried using a
h:panelGrid
, but again no success - the components are evenly spaced over the available area, instead of being directly adjacent and left-aligned as I intended. Here's the code:
<h:panelGrid columns="2">
<h:outputLabel for="timeSpanUnitsCombo3" value="Time Span " />
<rich:comboBox id="timeSpanUnitsCombo3" value="#{bean.timeSpanUnitsLabel}" enableManualInput="false">
<f:selectItems value="#{bean.timeSpanUnitsList}" />
</rich:comboBox>
</h:panelGrid>
And here's the rendered output:
Component layout with richfaces is proving to be thoroughly frustrating. I'll give second prize to anyone who has some good references on layout with richfaces. :)
This can be done by many ways. One of them is to use fragment
<s:fragment>
<h:outputText value="Time Span" />
<rich:comboBox id="timeSpanUnitsCombo2" value="#{bean.timeSpanUnitsLabel}" enableManualInput="false">
<f:selectItems value="#{bean.timeSpanUnitsList}" />
</rich:comboBox>
</s:fragment>
Or you can use a div instead of fragment. <div> your code...</div>
If you are using seam, you can wrap it in <s:decorate>
and use <s:label>
From Seam in Action
....<s:label> and <s:message>. The benefit of using the Seam tags is
that they are automatically correlated with the adjacent input component, a feature
of <s:decorate>
精彩评论