Smart Gwt components are not rendered in html div tag

Question

I am using smart GWT to develop my application, to create the structure of the application I am using GWT components. The HTML code snippet is as below:

<div class="container">
    <div id="pagePanel" ></div>
</div>

In my pagePanel div all the components are added. As I add components dynamically in the pagePanel div, the pagePanel div does not enlarge as per the size of the added component and the added smart gwt components overflows the pagePanel div. So I need to give css to each and every div of smart gwt. But as the GWT generates HTML structure on its own it is not possible to find all the div in code.

As, I am using flex table to structure my page, FlexTable is added in Canvas of smart gwt. Canvas is added to initWidget of Composite super class. I gave css to flex table and canvas but between the canvas and flex table two more divs are generated and I cannot get how to give css to these divs as I am not able to find them in my code.

The code is as below:

 NTCanvas smartContainer = new NTCanvas();
 smartContainer.setWidth("970px");
 smartContainer.setStyleName("smart-container");
 smartContainer.setStylePrimaryName("smart-container");
 initWidget((Widget) smartContainer);

Can any body tell how to locate the gwt generated divs in code. Or how to solve the overflow problem of smart components from PagePanel div.

Thanks, Punam Purohit

Answer 1

Covered in the SmartGWT FAQ:

http://forums.smartclient.com/showthread.php?t=8159#aMix

Can I mix Smart GWT and GWT widgets?

Yes, with caveats.

Smart GWT has interoperability support that allows a Smart GWT widget to be added to a GWT container and allows a GWT widget to be added to a Smart GWT container, and it's appropriate to use this for:

• incremental migration to Smart GWT, such as introducing singular, sophisticated Smart GWT components like the Calendar or CubeGrid to an existing GWT application

• using sophisticated third-party GWT widgets within Smart GWT, where Smart GWT doesn't have corresponding built-in functionality

However it does not make sense to freely intermix Smart GWT and GWT (or other) components, that is, for example, you should not place GWT widgets within a Smart GWT container that is in turn within a GWT container. In general, don't intermix widgets unless the need for a feature forces you to.

The reason for this is that there are limits to the maximum degree that two Ajax widget kits (including GWT) can interoperate - there are no standards that allow interoperability in the areas of management of tab order, zIndex management, pixel-perfect layout, section 508 accessibility and multi-level modality.