David Chandler's Journal of Java Web and Mobile Development

  • David M. Chandler

    Web app developer since 1994 and Google Cloud Platform Instructor now residing in Colorado. Besides tech, I enjoy landscape photography and share my work at ColoradoPhoto.gallery.

  • Subscribe

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 223 other followers

  • Sleepless Nights…

    January 2010
    S M T W T F S
  • Blog Stats

    • 1,029,167 hits

GWT layout gotcha

Posted by David Chandler on January 12, 2010

I previously wrote about GWT layout with HTML and CSS. One gotcha I’ve found is that you must be careful not to attach a widget to a DIV nested inside a DIV that is attached to a widget. By way of negative example, consider this HTML:

<div id="main">
	<div id="app">
		<div id="detail_header"></div>

Because the detail_header DIV is nested inside the main DIV, this will fail:


The error message is not particularly obvious, which is why I wrote this post:

[ERROR] Uncaught exception escaped
java.lang.AssertionError: A widget that has an existing parent widget may not be added to the detach list
at com.google.gwt.user.client.ui.RootPanel.detachOnWindowClose(RootPanel.java:122)

The solution is simply to untangle the DIVs by making them siblings instead of nested:

<div id="main">
	<div id="detail_header"></div>
	<div id="app"></div>

2 Responses to “GWT layout gotcha”

  1. Hi, your blog is really helpful. Thank you!

    I’m encountering this same error, but am not sure how best to fix it. I have a GWT app where the entire UI is generated programmatically, so the HTML document is essentially just an empty . The top-level component is TabLayoutPanel that divides up the app into several screens.

    On one screen, I have use a GWT HTML widget inside a DockLayoutPanel which I then use a JSNI function to populate with a Google Map (api v3). This same JSNI function creates a Map InfoWindow with a content that I want to then populate with some more GWT components. When I call RootPanel.get(“info-window-div”) I get the exception since the div is underneath the GWT hierarchy.

    Is the design of my application wrong, or is there some viable workaround? My goal was to use GWT for all the layout and application chrome, but now I’m starting to doubt that this is doable.

    Any advice would be appreciated

    PS – I tried using the GWT Maps API library but found that it’s almost a year and a half out of date, so I opted for the JSNI approach.

    • Thanks, Ivan. It sounds like you should make info-window-div a sibling of the DockLayoutPanel rather than a child div. I think you won’t be able to use a single div for all layout if there is a mix of GWT and non-GWT divs in the hierarchy because there’s no way to add a child Widget to a non-Widget.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: