Question

I have some code like the below and it works, but instead of showing just a number, I want to show “number%”. Here’s what I have:

<h:outputtext value="#{somebean.doubleValue}">
    <f:convertnumber maxfractiondigits="2">
</h:outputtext>

If I put the “%” sign inside the value property, the converter won’t work (I believe because the evaluated result is not just a number), but if I put the “%” sign in other outputtext tag, one line break appears between the number and it. I don’t want that.

<h:outputtext value="#{somebean.doubleValue}">
    <f:convertnumber maxfractiondigits="2">
</h:outputtext>
<h:outputtext value="%"> <!--prints a new line-->

What’s the best way to achieve a “xx.xx%” formatting on jsf?

Answer 1

Set the CSS white-space property of the common parent element to nowrap.

E.g.

<span style="white-space: nowrap;">
    <h:outputText value="#{somebean.doubleValue}">
        <f:convertNumber maxfractiondigits="2">
    </h:outputText>%
</span>

(note: you don’t necessarily need <h:outputText> for plain text)

If you are actually using this in a <h:column> (as I would initially guess), you could specify a classname for the <td> by the columnClasses attribute of the <h:dataTable>.