Geek Answers Handbook

How to make horizontally scrollable cell in datatable

This is with PrimeFaces, but I think this question applies equally to standard JSF data.

I have a data column in which the record ends with a word, because the content can be quite long. To make the display more readable, I would prefer that the content is not wrapped, but instead provide horizontal scrolling to view any content that is not displayed by default.

I'm sure this is a simple CSS modification, but my qualifications are very low.

<p:dataTable ... > <p:column headerText="Book Title"> <h:outputText value="#{book.title}" style="???" />
+6
source share
1 answer

This is only possible if the text is enclosed in a block level HTML element with the width disabled and the text disabled, and the element has the CSS property overflow:scroll or at least overflow-x:scroll defined.

So, in simple HTML expressions, this will basically be the following approach:

 <div style="width: 200px; white-space: nowrap; overflow-x: scroll;"> Some really really lengthy book title about a really really lengthy book. </div>

In the PrimeFaces <p:column> options, this will be:

 <p:column styleClass="scrollableCell"> #{book.title} </p:column>

from

 .ui-datatable td.scrollableCell div.ui-dt-c { width: 200px; white-space: nowrap; overflow-x: scroll; }

Note that you do not need to enter any div, <p:column> already does this.

See also:

+7
source

More articles:


All Articles