GWT DialogBox Has Gaps In Border For Larger Messages


Working with GWT v2.5.1, I'm creating a DialogBox and filling it using HTML by calling dialog.setHTML(...) with this:

<h3>could not start.</h3>
<p>These preferences must all be set before I can start</p>

I have no custom CSS. What appears on the screen is this:

DialogBox with gaps in side borders

You'll notice that there are big gaps in the left and right borders. Looking at the CSS for the dialogTopLeft and dialogTopRight classes, they extract the border from images/corner.png and the shown length of the border exactly matches the size of that image. In other words, the dialog is too big.

I tried removing the "no-repeat" directive on the background CSS attribute (using Chrome Inspector) but that repeats the entire border image, including the rounded corner at the top, and so does not appear contiguous.

I can't be the first person who's tried to put more than a single line into a DialogBox...

What's the trick to making the borders "repeat" and fill in the holes?

Problem courtesy of: Brian White


Thanks to @Moh for placing me on the right path.

The proper way to do this is to set only the dialog title using setHTML() and then create the body as a new panel and add it to the dialog.

DialogBox dialog = new DialogBox();
dialog.setHTML("<b>" + title + "</b>");
dialog.add(new HTMLPanel(message));

Adding buttons is left as an exercise for the reader...

Solution courtesy of: Brian White


GWT Dialoge box already have pre defined CSS. you have to override or have to set your own style names using set Methods. like..


Default css names starts with,

Discussion courtesy of: npprasanth

Wrap the HTML in HTMLPanel befor passing it to the DialogBox

DialogBox dialog = new DialogBox();
HTMLPanel panel  = new HTMLPanel("<h3>could not start.</h3><hr><p>These preferences must all be set before I can start</p>");
Discussion courtesy of: outellou

This recipe can be found in it's original form on Stack Over Flow.