xtk with GWT: “Uncaught Error: Could not find the given container or it has an undefined size.”

Question

Has anybody used XTK with GWT? No matter what I do I get this error "Uncaught Error: Could not find the given container or it has an undefined size."

I have defined the container element in the base html (below), which is accesible via other means (DOM, JQuery, GWT-JSNI), but not by XTK library.

My GWT-JSNI method and container HTML are as following.

Any help or pointers to debug further?

/* GWT JSNI method */
public native void initializeWebgl() /*-{

    alert('r ' + $doc.getElementById('r')); // works

    var r = new $wnd.X.renderer('r'); // fails ??????? why?
    alert("r is" + r);
    r.init(); }*-/

<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

<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="r" style="background-color: #000000; width: 100%; height: 100%;"></div>

</body>

Answer 1

1) This error was observed in some cases. The check which lets the renderer initialization fail is deprecated and already removed on the 'refactoring' branch. So, soon, this should work out of the box.

2) For now, the simplest workaround is to set the renderer to a fixed height (for testing):

<div id="r" style="background-color: #000000; width: 100%; height: 300px;"></div>

3) It is possible to use CSS to define a min-height on the renderer if the parent element has height 100%. Here information: http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html