PrimeFaces: how to place a row inside a column header

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

data table

The second column heading costs too many spaces. Therefore, I would like to put the discord between Number of and Sessions , as well as vertically align the table headers. I tried to reduce the width of the column, but it did not automatically break the line.

Also, since the header name is extracted from the l10n.properties file, I also tried to set it as Number of /n Sessions , but /n was printed as a regular line.

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

I would be very grateful if you could give me advice.

Respectfully,

+4
source share
4 answers

Thanks for the hint from the rags, I finally found the following solution:

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

try it

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

If you use the "Number of Sessions" from the properties file, try the following in your properties file ...

 myString = Number of \ Sessions 
+5
source

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

What you do in Firebug actually "edits the text" However, you need to click "Right Click" and then "Change HTML". That way when you insert the tag
, the text breaks and moves to the next line.

0
source

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

 <p:column headerText="Number of Sessions" style="white-space:pre-line;width:50px;"> <h:outputText value="#{value}"></h:outputText> </p:column> 
0
source