Question

I’m currently writing a pure GWT (2.3) application and I require the use of a dialog box. I followed the examples in the documentation and they work as they should.

My requirement is to display a dialog displaying some text in a scrollable text area with a close button (for now). The problem is that the right side of my dialog panel is being clipped off (please correct me if my terminology is incorrect here). Rather than explain it more, I will include some sample code and the resultant dialog box.

// This next block just builds debug text to display
StringBuilder sb = new StringBuilder();
for (int i = 0 ; i < 100; i++) {
    sb.append(((i+1) < 10) ? " " : "").append(i+1).append(" : ");
    for (int j = 0; j < 8; j++) {
        sb.append("1234567890");
    }
    sb.append("\n");
}

final DialogBox dialogBox = new DialogBox();
dialogBox.setGlassEnabled(true);
dialogBox.setAnimationEnabled(true);
dialogBox.setText("My broken dialog box");
VerticalPanel contentPanel = new VerticalPanel();
contentPanel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
contentPanel.setSpacing(4);
TextArea ta = new TextArea();
ta.setCharacterWidth(90);
ta.setVisibleLines(40);
ta.setReadOnly(true);
ta.setText(sb.toString());
contentPanel.add(ta);
Button closeButton = new Button("Close Button");
closeButton.addClickHandler(new ClickHandler() {public void onClick(ClickEvent event) {dialogBox.hide();}});
contentPanel.add(closeButton);
dialogBox.setWidget(contentPanel);
dialogBox.show();

Maybe I’m doing something fundamentally wrong in my layout code? Any help much appreciated.

Chris

Answer 1

OK. I’m going to answer my own question here (but I’ll upvote the useful suggestions given thus far).

The reason for the clipping is my own mistake. I had overrode the default dialogBox style in my own css file as below:

.gwt-DialogBox {
    width: 400px;
}

Oops. Sorry for not catching this before I posted the question.