How to resize infoWindow automatically based on the content?

14608
11
10-22-2013 12:52 AM
AmaranathaNarasinghe
New Contributor
Hi,

I'm using infoWindow to display some text to the user. The content of the infoWindow is dynamically generated HTML formatted text. The problem here is, infoWindow shows the text by adding scroll bars.

I need to re-size the window to avoid the scroll bars. infoWindow.resize() method can't be used as the HTML text may have tables, new paragraphs or any thing.

Please help me to re-size the infoWindow automatically based on the content.
[ATTACH=CONFIG]28506[/ATTACH]
Regards,
Amnalk
0 Kudos
11 Replies
AmaranathaNarasinghe
New Contributor
Hi Manish,

Thank you very much for the quick responses and the assistance.

But still I've a issue with resizing as map.infoWindow._contentPane.scrollWidth does not adjust according to the content. Once the infoWindow popups with map.infoWindow._contentPane.scrollWidth + 50 that width remains for ever.

As my display content is dynamic, this causes problems. As an example, for the first time content is too large and say map.infoWindow._contentPane.scrollWidth = 500. In the second time, content is very small. But map.infoWindow._contentPane.scrollWidth remains same and infoWindow is too wide to show this small content.

Please help.

Thanks and Regards,
Amnalk
0 Kudos
bobcarr
New Contributor III
The module "dojo/dom-geometry" might be helpful.  I was faced with a similar infoWindow scrollbar issue this week and it seems to be resolved after adding some code which incorporates that module.  The variance in size for me was in height-only, as I was using NWS weather observation XML and which varies in content by station and observation time.  The variance you describe seems to be in both dimensions, and probably much larger in magnitude. 

I create the div (and assign it an ID) in the function which processes the output from the XHR request, then include the dojo/dom-geometry module in the function tied to the mouse-over event.  The dom-geometry module is used against the div id to obtain its dimensions, which you can then use to calculate/set a new infoWindow size.
/* excerpt from function mkinfoWindowContent
var infocontdiv = domConstruct.create("div");
infocontdiv.id = "wthrdiv";
infocontdiv.innerHTML = content;  
r9WthrApp.map.infoWindow.setContent(infocontdiv);


/* excerpt from function which uses dojo/dom-geometry to determine height of content
require(["dojo/_base/Deferred","dojo/dom","dojo/dom-geometry"], 
          function(Deferred,dom,domGeom){
.
.
.
    var retdata = new Deferred();
    retdata = getWthrXML(forestnum); //deferred
    retdata.then(
        function(xmldoc) {
            mkInfoWindowContent(xmldoc);
            (evt) ? r9WthrApp.map.infoWindow.show(evt.screenPoint,r9WthrApp.map.getInfoWindowAnchor(evt.screenPoint)) : null; 
            var node = dom.byId("wthrdiv");
            var coords = domGeom.position(node);
            var newht = coords.h + 50;  //coords.h is height property
            r9WthrApp.map.infoWindow.resize(250,newht);
        }   
    ); //end deferred then
});
0 Kudos