resize canvas containing widget

[leifkerd]

Using smartgwt 2.4, gwt-2.1.1

I have a canvas with a mapWidget, the canvas resizes and the mapwidget resizes but a generated div between the two doesn't. If I manually change the div's width then it looks fine, so how do I trigger the resize of this div?

<div onscroll="return isc_GEMap_0.$lh()" style="position: absolute; left: 0px; top: 0px; width: 1001px; height: 376px; z-index: 200162; margin: 0px; -moz-box-sizing: border-box; overflow: hidden; cursor: default;" class="GEMapPanel" eventproxy="isc_GEMap_0" id="isc_K">
   <div style="position: relative; visibility: inherit; z-index: 200162; cursor: default;" eventproxy="isc_GEMap_0" id="isc_L">&nbsp;
      <div onscroll="return isc_WidgetCanvas_1.$lh()" style="position: absolute; left: 0px; top: 0px; width: 701px; height: 376px; z-index: 200180; -moz-box-sizing: border-box; overflow: hidden; cursor: default;" class="normal" eventproxy="isc_WidgetCanvas_1" id="isc_M">
          <div style="position: relative; visibility: inherit; z-index: 200180; cursor: default;" eventproxy="isc_WidgetCanvas_1" id="isc_N">
             <div id="isc_WidgetCanvas_1_widget" style="width: 100%; height: 100%;">
                <div class="MapWidget" style="width: 1001px; height: 376px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden; z-index: 0;">

Notice that the parent and child divs are width:1001px but the div with id="isc_M" remains at the original width of 701px.

Any suggestions?

[Isomorphic]

Just manually resize the MapWidget when the container changes size (fired Resized event).

[leifkerd]

That's the thing I set the size on both the parent canvas and the mapwidget itself but the problem is with the div that sits between the two objects. as a work around i just get the parent element and hack in a new style to change the width. works great but not very elegant. thanks

		String style = map.getElement().getParentElement().getParentElement().getParentElement().getAttribute("style");
		int start = style.indexOf("width:");
		int end = style.indexOf(';', start);
		String new_style = style.substring(0, start) + "width: "+width+"px;" + style.substring(end);
		map.getElement().getParentElement().getParentElement().getParentElement().setAttribute("style", new_style);

[Isomorphic]

The problem is the 100%/100% DIV coming from MapWidget. Make MapWidget fixed size based on the size of the parent, and you won't need a hack.