The InfoBox's left/right beak decision is made once - but what if the window is resized?

Question

Hi All -

I'm sorry if this was covered, but I don't even know how to begin searching for this problem...

When the map loads it seems to know the browser's window size, and the InfoBox flips from left to right as needed when it gets to close to the edge.  However, if you resize the window after the map has been loaded, it no longer flips the InfoBox from left to right correctly.

Is there any way to tell the map that the window has resized without reloading the entire map on every resize of the window?

I hope that made sense - if anything was confusing, please just ask questions - THANKS!

p.s. Oh, I'm using a custom InfoBox by clearing the default InfoBox styles, and then setting the margins I want to the proper classes:  .customInfoBox-with-leftBeak and .customInfoBox-with-rightBeak.

Answer 1

The flipping of the infobox is not controlled on the size of the browser window. It is based on the size of the map. If the pushpin is left of the middle of the map then the infobox displays on the right, if the pin is right of the middle of the map then the infobox displays to the left. This is for the default functionality. If you used the customInfoBox styles then this may work differently than expected. 

Answer 2

Actually, if you go to the interactive SDK and use 'use default shapes > add default shape' to add a push pin, then pan that pushpin all the way to the right of the map, the infobox will still display to the right of the pushpin, even if it goes off the right side of the map.  However, if your bowser window's edge is lurking just outside the edges of the map, only then will it flip to the left of the pushpin.

I've used Firebug in Firefox to confirm that:

A) The InfoBox's class changes properly from 'ero-leftBeak' to 'ero-rightBeak' in the SDK, no matter what order you load the map and resize the window.

B) After doing nothing to the map on my own page except loading it, clearing the default info box styles and then placing a pushpin, the map will stop switching the InfoBox's class from 'customInfoBox-with-leftBeak' to 'customInfoBox-with-rightBeak' once the window has been resized to a smaller size.  It's as though it still assumes that the edge of the window is far away and tries to display it to the right of the pushpin, but the InfoBox just scrunches up against the window's edge.  However, if you reload the page after you've resized the window to a smaller size, it now knows the window's smaller limits and flips the box accordingly, even after you re-maximize the window!

If anyone is using custom info boxes, please let me know if it's doing the same thing to you.  If anyone has any suggestions on how to make my map stop acting like this, I'd love to hear them.

Thanks again!