inputNumberSpinner forcing line break

[c_eric_ray]

I want to have the following layout..

Label : <rich:inputNumberSpinner>

where Label is on the left and the spinner component is on the right. However, the component always forces the rending to look like the following.

Label:
<rich:inputNumberSpinner>

where Label is above the spinner component.

No matter what type of formatting and style I apply, the spinner is always on a line by itself. Any ideas on how to fix this.

Here's my web snippet.

<rich:togglePanel id="newPoolLink" initialState="closed" switchType="client" stateOrder="closed, open">
 <f:facet name="closed">
 <rich:toggleControl for="newPoolLink" value="Add License Pool" />
 </f:facet>

 <f:facet name="open">
 <h:panelGroup>
 <h:outputText value="License Count:" />
 <rich:spacer width="3" />

 <rich:inputNumberSpinner id="poolSpinner" value="1" minValue="1" cycled="false"
 maxValue="#{licenseManagement.selectedBundle.licensesAvailable}" />

 <rich:toggleControl for="newPoolLink" value="Cancel" />
 </h:panelGroup>
 </f:facet>
 </rich:togglePanel>

[ilya_shaikovsky]

use display: inline;

[c_eric_ray]

that doesn't work. please provide exact syntax. there is no display attribute on inputNumberSpiner

thanks.

[damianharvey]

I have a similar issue with the inputSpinner where clicking on the up/down buttons causes a line break to appear/disappear. Very odd.

[ilya_shaikovsky]

sorry my style suggestion was wrong. try to use panel grid for layout ceration.

[damianharvey]

I'd like to display my inputNumberSpinner inline with some other fields. The only ways that I have been able to do this are either floating all of the input fields, but this means giving them widths, which is tricky inline. Or using display: table-cell; which is a bit nasty as well. Has anyone found a better way?

Cheers,

Damian

[c_eric_ray]

Your best bet is to use a table and get the layout you want then place the component in the appropriate cell. One easy way to do it is to use <h:panelGrid>

[lbbishop]

I had a similar problem. I ended up placing the inlined tags in a panelGrid:

<h:panelGrid columns="3">
 <h:outputLabel for="EmailInterval1" value="Email Interval:" styleClass="label" />
 <rich:inputNumberSpinner id="EmailInterval1" value="#{travelerForm.traveler.autoEmailInterval}" inputSize="3" styleClass="label" />
 <h:outputText value="(Days between notifications to Monitor when Traveler is stalled at a Step)" styleClass="fieldInstructions" />
</h:panelGrid>