开发者

Correct layout of h:outputLabel and rich:combobox components on same line

开发者 https://www.devze.com 2023-01-27 22:51 出处:网络
With richfaces, how can I get my h:outputLabel and rich:combobox components to display directly adjacent to each other on the same line?

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:

Correct layout of h:outputLabel and rich:combobox components on same line


#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:

Correct layout of h:outputLabel and rich:combobox components on same line


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>

0

精彩评论

暂无评论...
验证码 换一张
取 消