Need Help Figuring Out Why Text Is Overflowing my h:outputText Within A p:panelGrid with Primefaces

0
votes

Like the title says, I am using PrimeFaces, and I have an h:outputText within a p:PanelGrid. Whenever there is a very long, unbroken string put into the "value" field of the h:outputText, it overflows the span created by the h:outputText and the td created by the p:panelGrid, and runs off the right side of the page. It has to be a single, long, unbroken string of text, but it will always overflow its boundaries. I have tried adding style="overflow: scroll;" and style="width: 100px;", and other possible fixes, but nothing reigns in the text. Does anybody have any idea why this is happening, and what I can do to fix it?

Thanks for taking the time to read, and have a great day.

:-)

2
primefaces
Would it be possible to add some small code example where this is still happening? – Aksel Willgert
stackoverflow.com/questions/4556980/… see if that applies – Aksel Willgert
Aksel Willgert - No, cannot provide any code. Sorry. I'll try your link when I get to work on Monday. Thanks for taking a look at this for me. – Brian
Provided an answer; just as a helpful suggestion, although you're using PrimeFaces this is really a CSS question. Tagging it with CSS might get a larger set of eyes on it. – Greg Pettit
Greg, I wasn't sure if it was CSS or Primefaces, because [using Firebug] I couldn't find any CSS that may be causing the issue. – Brian

2 Answers

0
votes

Setting a static width won't help in and of itself. However, when width of the element is known (not set to "auto"), overflow: scroll should work fine as should overflow:hidden. Is it possible that the overflow rule is being overridden by a more specific rule elsewhere in one of your style sheets? That strikes me as the most likely culprit.

If it's OK to lose some of that information (accessing the full string on hover or clicking an icon, for example), you could combine the following:

.someElement {
  overflow: hidden;
  text-overflow: ellipsis;
}

In browsers that support text-overflow: ellipsis (which isn't all browsers) you would see a neat ellipsis character at the truncation point. Otherwise it'll just kinda get cut off at the edge of your container.

To sum it up:

  • overflow:scroll should already work. If it's not, there's another rule superseding it.
  • you might want to consider the ellipsis solution instead of the scrollbar, if doing so doesn't break your project requirements
0
votes

To all who have read and replied. This, as it turns out, is not a Primefaces issue, but an HTML/CSS issue. I will be reposting this question thusly. Thank you for taking the time to read and reply. Below is a simple HTML reproduction of my issue, along with some of the suggestions mentioned:

<!DOCTYPE html>
<html>
    <head>
        <title> problem </title>
        <style type="text/css">
            span.troubleSpan {
                overflow: hidden;
                text-overflow: ellipsis;
                word-wrap: break-word;
            }
        </style>
    </head>
    <body>
        <h4> problem </h4>
        <div>
            <table border="1">
                <tr>
                    <td>
                        <span>cell</span>
                    </td>
                    <td>
                        <span>&nbsp;</span>
                    </td>
                    <td>
                        <span>cell</span>
                    </td>
                    <td>
                        <span class="troubleSpan">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</span>
                    </td>
                    <td>
                        <span>&nbsp;</span>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>