1

I'm using Google web toolkit to develop a small login page. I'm using GWT Designer. My problem is that the rootPanel is not being displayed at the centre but at the top-left corner of the browser. How can I put it at the centre of the page?

Cody Gray - on strike
  • 239,200
  • 50
  • 490
  • 574
Krt_Malta
  • 9,265
  • 18
  • 53
  • 91

3 Answers3

2

You don't need GWT at all for this, but rather just CSS/HTML.

<body>
  <div id="root" style="width: 100px; margin: auto;">
</body>
Jason Hall
  • 20,632
  • 4
  • 50
  • 57
  • My mistake, you have to specify a width to make it work. And this will only center it horizontally, not vertically. – Jason Hall Mar 30 '10 at 23:31
1

You cannot display the RootPanel in the center of the screen since the RootPanel is the <body> of the document itself, it has no position.

What you want is to add a base panel to the RootPanel which will be centered horizontally. That new panel (suppose a FlowPanel) will hold all other widgets, and that panel can have a position, which means it can be centered.

Something along these lines should do:

RootPanel rp = RootPanel.get();
FlowPanel fp = new FlowPanel();

fp.add(allYourWidgets);
fp.addStyleName('center'); // where center is a css rule with "margin: auto;"

rp.add(fp);
Yuval Adam
  • 161,610
  • 92
  • 305
  • 395
  • RootPanels don't have to be elements. If you specify an ID in RootPanel.get() it will select any element with that ID to be your root panel. – Jason Hall Mar 31 '10 at 13:25
0

The RootPanel gets a reference to the panel to which all your application widgets must ultimately be added. (RootPanel returns the reference to the document’s body in the browser.) You would generally inject the starting point of your application into an HTML page. You can do this by using the RootPanel class’s get() methods.

Gianluigi Marotta
  • 48
  • 6