GWT 2.2 RootPanel CSS error

Question

Hey guys, I'm just starting out with GWT and am getting the following error when I run the project in Eclipse

19:36:16.084 [ERROR] [adaptivgwt] Warning: com.google.gwt.user.client.ui.RootPanel descendants will be incorrectly positioned, i.e. not relative to their parent element, when 'position:static', which is the CSS default, is in effect. One possible fix is to call 'panel.getElement().getStyle().setPosition(Position.RELATIVE)'.

java.lang.IllegalStateException: com.google.gwt.user.client.ui.RootPanel is missing CSS 'position:{relative,absolute,fixed}' at com.google.gwt.user.client.ui.AbsolutePanel.verifyPositionNotStatic(AbsolutePanel.java:279) at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:118) at com.ivstel.adaptiv.client.AdaptivGWT.loadLogin(AdaptivGWT.java:29) at com.ivstel.adaptiv.client.AdaptivGWT.onModuleLoad(AdaptivGWT.java:21) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect.Method.invoke(Unknown Source) at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396) at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:183) at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:510) at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352) at java.lang.Thread.run(Unknown Source)

This is what my entry point looks like:

public class AdaptivGWT implements EntryPoint {

private static AdaptivGWT singleton;

        public static AdaptivGWT get() {
                return singleton;
        }

        public void onModuleLoad() {
                singleton = this;
                loadLogin();
        }

        public void loadLogin() {
                RootPanel.get("login").clear();
                RootPanel.get("main").clear();

                LoginGWT login = new LoginGWT();
                RootPanel.get("login").add(login, 10, 10);
        }

        public void loadMain(User user) {
                RootPanel.get("login").clear();

                MainGWT main = new MainGWT();
                RootPanel.get("main").add(main, 10, 10);
        }
}

The HTML file.

<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="AdaptivGWT.css">

    <title>Adaptiv</title>

    <script type="text/javascript" language="javascript" src="adaptivgwt/adaptivgwt.nocache.js"></script>
  </head>

  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <div id="login"></div>
    <div id="main"></div>

  </body>
</html>

My guess is the answer to this question is in the part not shown here: your main html file, which contains the main and login labeled html elements. So could you add the html as well. — Hilbrand Bouwkamp

Hilbrand Bouwkamp Hilbrand Bouwkamp · Accepted Answer · 2011-02-28T14:04:41

Using the position arguments (i.e. 10, 10) with the add method requires the elements you want to add the GWT widgets to as child element, also be positioned elements (i.e. they must have a property: position:). In your case the div's (both with id main and login) have no position. Better use add(main) instead. If you want to position your element 10 pixels to left/top use css margin or padding (depending on your use case).

On a side note, it's not necessary to have both a 'login' and 'main' div's, you could simply use one div, or directly add it to the body, i.e. use get(). That way you have the full control in GWT, instead having part of the structure in the html file.

GWT 2.2 RootPanel CSS error

1 Answers