How to resize infoWindow automatically based on the content?

[AmaranathaNarasinghe]

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

[JohnGravois]

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

[AmaranathaNarasinghe]

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

[ManishkumarPatel]

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

[AmaranathaNarasinghe]

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

[ManishkumarPatel]

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

[AmaranathaNarasinghe]

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

[ManishkumarPatel]

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

[AmaranathaNarasinghe]

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

[ManishkumarPatel]

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