How to make a label display in a single line in jsf

Question

Can any one help me to display a label in a single line?

In my UI there is a field called check funding period

but it is getting displayed in 3 lines like:

check                              
funding                               
period

what can i do so that it will display like

check funding period          (in single line)

in jsf?

Answer 1

Not really a JSF question, just a CSS question.

Ensure that the label gets the CSS style white-space:nowrap; either via the style or styleClass attributes.

Answer 2

Looks to me like you have your output in a column of a table and have not made sure the column is wide enough. Use the columnClasses attribute of the dataTable to specify a css column style and make sure it is wide enough for your output. ie:

<rich:dataTable id="curfDataTable"
columnClasses="column40percent,column20percent,column40percent"
rowClasses="rowFirst,rowSecond" value="#{accessCurfMBean.unowned}"
var="curf" styleClass="tableInfo">

Much the same for when using the panelGrid layout.

<h:panelGrid id="panel" columns="2" border="1" columnClasses="column40percent,column60percent">

and in your css:

.column20percent {
    width: 20%;
}

.column40percent {
    width: 40%;
}

.column60percent {
    width: 60%;
}

Answer 3

What I usually do is I wrap them in a h:panelGrid tag like this:

<h:panelGrid columns="3">
    <h:outputText value="check" />
    <h:outputText value="funding" />
    <h:outputText value="period" />
</h:panelGrid>

If the html output from this is too messy for you, then I would consider doing like this:

<h:outputText value="#{Messages.check Messages.funding Messages.period}" />

Or simply:

<h:outputText value="Check funding period" />

As I said in the comment tho it really depends on what tags your using and what your wrapping them in. This may just be a simple CSS problem.