Posted under JSF
Permalink
Tags CSS, Gotcha, HTML, inline-block, JSF, Primefaces, Tip, Tutorial
I hit this issue when displaying email addresses in a p:dataTable.
The problem is that for long strings without spaces, the browser tries to enlarge the table cell width, causing the table to stretch beyond the correct bounds and messing up the layout. A column will wrap and enlarge vertically, but this will only be done when it can break on a space. Setting the widths for the columns is technically just advisory on the browser and may be overriden if needed.
There are various solutions to this, and this post here in Stack Overflow discusses them.
My chosen solution in this case was the following:-
- Place the text in the cells in <spans>, to allow them to be styled with CSS. You could also style the column <td> cells by applying style/styleClass attributes to the p:column tag, but this will limit your flexibility – for example if you do this p:column does not expose the title attribute on the <td> (see below)
- Style the <spans> with display:inline-block;overflow:hidden. This allows a width to be set for the span (I used the same width as set for the column), and hides any overflow (which would otherwise bleed into the next column).
- Text will still wrap on spaces if they are present, but long strings without spaces, such as email addresses or file paths, do not cause a problem, but they will truncate and so will not be fully visible by default.
- I include a title attribute on the span to include the full text. This allows the full text to be displayed on hover for any long strings that are truncated in the cell.
This neatly solves the problem, and prevents the table layout messing up.
Leave a Reply
You must be logged in to post a comment.