6

In my application, I have the following <p:dataTable>:

data table

The 2nd column's header costs too much spaces. Hence, I'd like to put a linebreak between Number of & Sessions and also vertically align the headers of the table. I tried to reduce the width of the column but it didn't automatically result in a linebreak.

Besides, since the header name is retrieved from the l10n.properties file, I also tried to set it as Number of /n Sessions but /n was printed out as a normal string.

UPDATE: I also tried to set the property as Number of <br/> Sessions. However, in the HTML code generated, <br/> disappeared and the table looks exactly the same as above.

I'd be very grateful if you could give me an advice.

Best regards,

4 Answers 4

23

First of all, you need to remove the headerText attribute from the column and add a header facet inside it:

/*  no_of_sessions = Number of &#10; Sessions  */
<p:column ... >
    <f:facet name="header">
        <h:outputText value="#{l10n.no_of_sessions}" 
                  escape="false" style="white-space:pre-line;" />
    </f:facet>
    ...
</p:column>

The escape="false" is relevant so html is escaped, then you can put anything you want in there. If you just want to style content, this is not needed

1
  • Thanks! just to clarify, it works for me by removing the 'headerText' attribute of the column, and adding the facet element inside the column
    – acaruci
    Nov 29, 2017 at 12:37
6

Try this

<f:facet name="header">
    <h:outputLabel value="Number of&#10;Sessions" style="white-space:pre;"/>
</f:facet>

If using the "Number of Sessions" from properties file, try the below in your properties file ...

myString = Number of \
           Sessions
3
  • I have just tried your solution. Instead of putting a linebreak between Number of and Sessions, the linebreak was created at the beginning of the phrase. As a result, there is an empty line and the whole Number of Sessions was moved to the 2nd line. :(
    – Mr.J4mes
    Jul 16, 2012 at 8:58
  • can you post what you tried. Because, I Posted here what was working fine for me and of course I was using IE.
    – rags
    Jul 16, 2012 at 9:03
  • if you are accessing 'Number of Sessions' from properties file, try using back slash as mentioned in my updated answer
    – rags
    Jul 16, 2012 at 9:13
0

If it's CSS, you could have a <br/> tag after 'Number of'. I just saw your edited post.

What you're doing in Firebug is actually 'editing text' However, what you need to do is 'Right click' and then 'Edit HTML'. This way when you insert the
tag, the text would break and shift onto the next line.

1
  • :).. But still, how can I retrieve it directly from the l10n.properties file? Somehow, <br/> was deleted before the whole view is printed out.
    – Mr.J4mes
    Jul 16, 2012 at 8:27
0

The simplest answer for this is to add white-space:pre-line in the style attribute. See the below code

<p:column headerText="Number of Sessions" style="white-space:pre-line;width:50px;">
     <h:outputText value="#{value}"></h:outputText>
</p:column>
1
  • This is not a good solution because each word would be on one line.
    – Mr.J4mes
    May 14, 2014 at 13:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.