How do I center a widget in the middle of the screen in vanilla GWT?

Question

Hi,

I wish to center a widget in the middle of the browser window (horizontally and vertically). I do not wish to stretch the widget to fill the root pane nor do I wish to use a popup window.

Is there a simple way this can be achieved?

Thanks,

Answer 1

You can do this by putting the widget on a DialogBox widget, and then displaying that in the center. However, the DialogBox comes with a caption and border which you might not want.

DialogBox dialogBox = new DialogBox();
dialogBox.setText("Caption");
dialogBox.add(_yourwidget_);
dialogBox.center();
dialogBox.show();

Answer 2

You can do that programmatically as shown in the answer above, or you use CSS. To do it the CSS way, attach a style name to your widget first:

panel.setStyleName("style")

and in your application CSS file do the following:

.style {
    margin-left: auto;
    margin-right: auto;
}

That should centre the widget in your window.

Hope this helps!