CODEWITHSUNDEEP
primefaces
Brian
Brian

Reputation: 1989

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

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.

:-)

Upvotes: 0

Views: 766

Answers (2)

Brian
Brian

Reputation: 1989

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>

Upvotes: 0

Greg Pettit
Greg Pettit

Reputation: 10830

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

Upvotes: 0

Related Questions