How to put the RootPanel in the center of page?

36 views

Skip to first unread message

Evan Cheng

unread,

Apr 22, 2011, 3:36:56 PM4/22/11

to Google Web Toolkit

Dear all,

I've try many ways to put the RootPanel in the center of page, but I
still can not be done.
Maybe some how in development mode it's work, but not work when I use
locahost:8888.
I found seems many people have the same problem, but I can not solve
my problem with the same solution.

Here is my code:

public void onModuleLoad() {
RootPanel rootPanel = RootPanel.get("container");

HorizontalPanel horizontalPanel = new HorizontalPanel();
horizontalPanel.setStyleName("center");
rootPanel.add(horizontalPanel);
horizontalPanel.setSize("100%", "100%");

Label lblNewLabel = new Label("New label");
horizontalPanel.add(lblNewLabel);

Login login = new Login();
horizontalPanel.add(login);
}

CSS:
body {
background-color: red;
color: black;
font-family: Arial, sans-serif;
font-size: small;
margin: auto;
margin-left: auto;
margin-right: auto;
width:100%;
text-align:center;
}

#container {
background-color: red;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width:760px;
/*text-align:center;*/
}

HTML:
<body>
<div id="container">

<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></
iframe>
</div>
</body>

When I debug with Chrome(localhost:8888), I found seems <table> which
from HorizontalPanel will behind the <div> tag, so Login table will
not be centered.

Any comment?

Reply all

Reply to author

Forward

0 new messages