Question

In GWT, one can create a custom logging area by installing a HasWidgetsLogHandler. In my case, that is a VerticalPanel. Unfortunately, the rest of the page is distorted by the logging output, which is too wide. How can I wrap the lines?

HasWidgetsLogHandler adds an HTML element for each log entry. I tried styling the individual elements in UiBinder, but that did not work:

<ui:style>
  @external gwt-HTML;
  .gwt-HTML {
    white-space: normal;
  }
</ui:style>

Similarly, adding overflow: hidden—which would have been a less attractive option—had no effect.

Thank you for any pointers.

Answer 1

A VerticalPanel is implemented as an HTML table. While you can use it, I would usually recommend a FlowPanel instead.

On a FlowPanel, you can set the following properties:

white-space: normal;
word-wrap: break-word; 

word-wrap is CSS3, but is supported by many browsers: http://caniuse.com/wordwrap. It allows long words to be wrapped after every character. For browsers that don’t support it, you may want to add overflow: hidden. (Or consider setting a fixed width together with overflow: auto.)

If you absolutely need to use a VerticalPanel, see Word-wrap in an HTML table (you have to set the word-wrap on the <td> then).