topic Re: How to resize infoWindow automatically based on the content? in ArcGIS JavaScript Maps SDK Questions

How to resize infoWindow automatically based on the content?

AmaranathaNarasinghe — Tue, 22 Oct 2013 07:52:30 GMT

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

Re: How to resize infoWindow automatically based on the content?

JohnGravois — Wed, 23 Oct 2013 15:10:37 GMT

welcome to the forums!

in this situation you want to call either infoWindow or popup.resize();

this will set a new maximum size to accomodate more text. when less text is present, the popup/infoWindow will shrink to fit.

try playing around with this sample to get the hang of it.
https://developers.arcgis.com/en/javascript/jssamples/map_infowindow.html

Re: How to resize infoWindow automatically based on the content?

AmaranathaNarasinghe — Thu, 24 Oct 2013 02:04:32 GMT

Hi John,

I tried the resize method as you suggested. It only shrink to fit for height not the width.

[ATTACH=CONFIG]28560[/ATTACH]

Please advice me on how to made this shrink to fit for width of the infoWindow.

Regards,
Amnalk

Re: How to resize infoWindow automatically based on the content?

ManishkumarPatel — Thu, 24 Oct 2013 02:33:54 GMT

Hi Amaranatha,

You can check the length of the content you set in the info window and based on the length you could resize the infowindow as required.

Please have a look at this fiddle:
http://jsfiddle.net/patelmanya/5SRgH/1/

Hope this helps.

Thanks & Regards,
Manish Patel

Re: How to resize infoWindow automatically based on the content?

AmaranathaNarasinghe — Thu, 24 Oct 2013 02:41:25 GMT

Hi Manish,

The content shown in my actual implementation is generated dynamically and it's a HTML formatted string. It may contain HTML tables (<table></table>), new paragraphs (<p>) and any other HTML tags.

That's the reason why I can't find the length of the lengthiest line of the content when previewing.

Thanks and Regards,
Amnalk

Re: How to resize infoWindow automatically based on the content?

ManishkumarPatel — Thu, 24 Oct 2013 02:54:36 GMT

Hi Manish,

The content shown in my actual implementation is generated dynamically and it's a HTML formatted string. It may contain HTML tables (<table></table>), new paragraphs (<p>) and any other HTML tags.

That's the reason why I can't find the length of the lengthiest line of the content when previewing.

Thanks and Regards,
Amnalk

Hi Amnalk,

Oh I see. Is it possible you could provide some examples of the content that are occuring in your actual implementation.

Although you can create a DIV element and assign the content (tables/para etc) as the innerHTML to this DIV and set the info window content as this DIV.

eg:
var infocontdiv = document.createElement("div");
infocontdiv.id = "infoContDiv";
infocontdiv.innerHTML = "This text can be dynamically set as per required and then calcuate the lenght of this text and set the width and height of info window.";
map.infoWindow.setContent(infocontdiv);

Try this alternative, the DIV element will always set its width and height dynamically.

Let me know.

Regards,
Manish

Re: How to resize infoWindow automatically based on the content?

AmaranathaNarasinghe — Thu, 24 Oct 2013 03:21:42 GMT

Hi Manish,

I tried as you suggested by adding a div. But still the issue exists. Please find the sample text for content.

<table><tr><td nowrap>1111111111</td><td>22222222222222222222222222</td></tr><tr><td>3333333333</td><td>4444444444444444444444444444444</td></tr><tr><td nowrap>555555555555555</td><td>66666666666666666666666</td></tr><tr><td>77777777777777777</td><td>8888888888888888888888888888</td></tr></table>

Please help.

Thanks and Regards,
Amnalk

Re: How to resize infoWindow automatically based on the content?

ManishkumarPatel — Thu, 24 Oct 2013 03:55:15 GMT

Hi Manish,

I tried as you suggested by adding a div. But still the issue exists. Please find the sample text for content.

<table><tr><td nowrap>1111111111</td><td>22222222222222222222222222</td></tr><tr><td>3333333333</td><td>4444444444444444444444444444444</td></tr><tr><td nowrap>555555555555555</td><td>66666666666666666666666</td></tr><tr><td>77777777777777777</td><td>8888888888888888888888888888</td></tr></table>

Please help.

Thanks and Regards,
Amnalk

Hi Amnalk,

Try the below code:

var infocontdiv = document.createElement("div");
infocontdiv.id = "infoContDiv";
infocontdiv.innerHTML = "<table><tr><td nowrap>1111111111</td><td>22222222222222222222222222</td></tr><tr><td>3333333333</td><td>4444444444444444444444444444444</td></tr><tr><td nowrap>555555555555555</td><td>66666666666666666666666</td></tr><tr><td>77777777777777777</td><td>8888888888888888888888888888</td></tr></table>";
map.infoWindow.setContent(infocontdiv);
map.infoWindow.resize(map.infoWindow._contentPane.scrollWidth + 50, map.infoWindow._contentPane.scrollHeight + 20);
map.infoWindow.show(evt.mapPoint, map.getInfoWindowAnchor(evt.screenPoint));

Let me know.

Regards,
Manish

Re: How to resize infoWindow automatically based on the content?

AmaranathaNarasinghe — Thu, 24 Oct 2013 05:46:04 GMT

Hi Manish,

Your code works fine for the first time when I clicked on the map. But the width of the dialog box is keep on growing upon opening.

Thanks and Regards,
Amaranatha

Re: How to resize infoWindow automatically based on the content?

ManishkumarPatel — Thu, 24 Oct 2013 06:16:32 GMT

Hi Manish,

Your code works fine for the first time when I clicked on the map. But the width of the dialog box is keep on growing upon opening.

Thanks and Regards,
Amaranatha

Hi Amnalk,

Sorry I actually didnt try that for multiple times. Anyways, you will have to try creating a global variable and assign the width & height to it. Also you will have to put a check if the scrollwidth and scrollheight is different then reassign the value and it will resize as per content.

//global variables
var infowindowWid,infowindowHgt = 0;

map.infoWindow.setContent(infocontdiv);
                    if (!infowindowWid)     //here you can put multiple conditions as per your requirement.
                  {
                        infowindowWid = map.infoWindow._contentPane.scrollWidth + 50;
                        infowindowHgt = map.infoWindow._contentPane.scrollHeight + 20
                    }
                    map.infoWindow.resize(infowindowWid, infowindowHgt);

Hope this helps.

Regards,
Manish

Re: How to resize infoWindow automatically based on the content?

AmaranathaNarasinghe — Thu, 24 Oct 2013 08:35:44 GMT

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

Re: How to resize infoWindow automatically based on the content?

bobcarr — Sat, 11 Dec 2021 06:51:29 GMT

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
});