Smart GWT and OpenLayers - problems with sizing

[dead_passive]

Hi,

I posted a message about this issue a while ago and I still haven't solved the issue. I'm trying to insert an OpenLayers map into my SmartGWT project. I'm using GWT-OpenLayers, which allows me to use an OpenLayers map as a widget. I set the widgets width and height to 100% then add it to a HLayout as follows:

MapWidget mw = createMap("EPSG:4326");
mw.getMap().setMaxExtent(new Bounds(-180, -90, 180, 90));
mw.setWidth("100%");
mw.setHeight("100%");

HLayout mapPanel = new HLayout();
mapPanel.setWidth100();
mapPanel.setHeight100();
mapPanel.addMember(mw);

However, my map doesn't appear on the page. I investigated this using Google Chrome development tools and it seems that the maps parent div has no height (the parent div is <div id="isc_13" eventproxy="isc_WidgetCanvas_0" style="position: relative; visibility: inherit; z-index: 200324; cursor: default; ">). I assume this div is generated by SmartGWT?

When I set the height of the map to a fixed value (like "400px") then it displays. However, any percentage value doesn't work!

I don't understand how this is happening, since I'm setting the HLayout to 100% and setting the MapWidget to 100%.

Any idea how I might solve this issue?

Thanks,

Jon

[dead_passive]

Just a small update:

I changed the ID of my HLayout container to "MyMapPanel" so I could see what is going on.

It seems a HLayout consists of two nested divs. The first div fills all of the space given to it (100% width and height). While the second div only fills the width, leaving it's height as 0px. Full generated HTML below, although I'm not sure if this is useful:

<div id="isc_10" eventproxy="MyMapPanel" class="normal" style="position: absolute; z-index: 200306; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; overflow-x: visible; overflow-y: visible; left: 0px; top: 26px; width: 1633px; height: 368px; " onscroll="return MyMapPanel.$lh()"><div id="isc_11" eventproxy="MyMapPanel" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:200306;CURSOR:default;">&nbsp;<div id="isc_12" eventproxy="isc_WidgetCanvas_0" class="normal" style="position: absolute; z-index: 200324; overflow-x: visible; overflow-y: visible; cursor: default; left: 0px; top: 0px; width: 1633px; height: 368px; " onscroll="return isc_WidgetCanvas_0.$lh()"><div id="isc_13" eventproxy="isc_WidgetCanvas_0" style="position: relative; visibility: inherit; z-index: 200324; cursor: default; "><div style="width:100%;height:100%" id="isc_WidgetCanvas_0_widget"><div style="width: 100%; height: 100%; " class="olMap"><div id="OpenLayers.Map_4_OpenLayers_ViewPort" style="position: relative; overflow-x: hidden; overflow-y: hidden; width: 100%; height: 100%; " class="olMapViewport olControlDragPanActive olControlZoomBoxActive olControlNavigationActive"><div id="OpenLayers.Map_4_OpenLayers_Container" style="position: absolute; z-index: 749; "><div id="OpenLayers.Layer.WMS_2" style="position: absolute; width: 100%; height: 100%; z-index: 100; " dir="ltr" class="olLayerDiv"></div></div><div id="OpenLayers.Control.PanZoomBar_6" style="position: absolute; left: 4px; top: 4px; z-index: 1001; " class="olControlPanZoomBar olControlNoSelect" unselectable="on"><div id="OpenLayers.Control.PanZoomBar_6_panup" style="left: 13px; top: 4px; width: 18px; height: 18px; position: absolute; "><img id="OpenLayers.Control.PanZoomBar_6_panup_innerImage" style="width: 18px; height: 18px; position: relative; " src="http://openlayers.org/api/img/north-mini.png"></div><div id="OpenLayers.Control.PanZoomBar_6_panleft" style="left: 4px; top: 22px; width: 18px; height: 18px; position: absolute; "><img id="OpenLayers.Control.PanZoomBar_6_panleft_innerImage" style="width: 18px; height: 18px; position: relative; " src="http://openlayers.org/api/img/west-mini.png"></div><div id="OpenLayers.Control.PanZoomBar_6_panright" style="left: 22px; top: 22px; width: 18px; height: 18px; position: absolute; "><img id="OpenLayers.Control.PanZoomBar_6_panright_innerImage" style="width: 18px; height: 18px; position: relative; " src="http://openlayers.org/api/img/east-mini.png"></div><div id="OpenLayers.Control.PanZoomBar_6_pandown" style="left: 13px; top: 40px; width: 18px; height: 18px; position: absolute; "><img id="OpenLayers.Control.PanZoomBar_6_pandown_innerImage" style="width: 18px; height: 18px; position: relative; " src="http://openlayers.org/api/img/south-mini.png"></div><div id="OpenLayers.Control.PanZoomBar_6_zoomin" style="left: 13px; top: 63px; width: 18px; height: 18px; position: absolute; "><img id="OpenLayers.Control.PanZoomBar_6_zoomin_innerImage" style="width: 18px; height: 18px; position: relative; " src="http://openlayers.org/api/img/zoom-plus-mini.png"></div><div style="background-image: url(http://openlayers.org/api/img/zoombar.png); left: 13px; top: 81px; width: 18px; height: 209px; position: absolute; " id="OpenLayers_Control_PanZoomBar_ZoombarOpenLayers.Map_4"></div><div id="OpenLayers.Control.PanZoomBar_6_OpenLayers.Map_4" style="left: 12px; top: 279px; width: 20px; height: 9px; position: absolute; "><img id="OpenLayers.Control.PanZoomBar_6_OpenLayers.Map_4_innerImage" style="width: 20px; height: 9px; position: relative; " src="http://openlayers.org/api/img/slider.png"></div><div id="OpenLayers.Control.PanZoomBar_6_zoomout" style="left: 13px; top: 290px; width: 18px; height: 18px; position: absolute; "><img id="OpenLayers.Control.PanZoomBar_6_zoomout_innerImage" style="width: 18px; height: 18px; position: relative; " src="http://openlayers.org/api/img/zoom-minus-mini.png"></div></div><div id="OpenLayers.Control.MousePosition_38" style="position: absolute; z-index: 1003; " class="olControlMousePosition olControlNoSelect" unselectable="on"></div></div></div></div></div></div></div></div>