bing maps infobox with scroll sticks

Question

I'm trying to make sure content inside an infobox popup scrolls so all the info is shown but when I try to scroll using the scrollbar on releasing the mouse button the map sticks to this point as if holding down and panning. Here's some code to reproduce:

    var location = new Microsoft.Maps.Location(0, 0);
    var html = "title<br/>description desc desc"
            + " description desc desc description desc desc"
            + " description desc desc description desc desc"
            + " description desc desc description desc desc"
            + " description desc desc description desc desc"
        ;

    var popupHTML = '<div style="height: 50px; width: 100px; overflow: auto; background: white;">{content}</div>';

    var options = {
        htmlContent: popupHTML.replace('{content}', html),
        visible: true,
    };
    var popup = new Microsoft.Maps.Infobox(location, options);

    map.entities.push(popup);

or alternatively paste the below into the Bing maps SDK under infobox section:

    map.entities.clear(); 
    var infoboxOptions = {title:'Infobox Title', description:'<div style="height:20px; overflow: auto;">Infobox description description description description description description description description description description description description description description description description description description description<div>'}; 
    var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );    
    map.entities.push(defaultInfobox);

Then try to scroll down and when you release, the map will be stuck to that position as if you're holding down and panning.

Any suggestions welcome, Thanks!

Answer 1

You must disable the default event handlers!

Try something like the following in your infobox creation func:

map.infobox = new Microsoft.Maps.Infobox(center, infoboxOptions);
        map.moveHandler = Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e) {
                    e.handled = true;});
        map.wheelHandler = Microsoft.Maps.Events.addHandler(map, 'mousewheel', function (e) {
                    e.handled = true;});
        Microsoft.Maps.Events.addHandler(map, 'click', function(e) { 
            if (map.infobox) 
                {map.entities.remove(map.infobox);
                map.infobox = false;
                Microsoft.Maps.Events.removeHandler(map.moveHandler);
                Microsoft.Maps.Events.removeHandler(map.wheelHandler);
                map.moveHandler = false;
                map.wheelHandler = false}});

Answer 2

I know I'm a little late to the party here, but I had the same issue, and solved it using the built-in events.

The cause

Through a lot of logging statements in various eventhandlers, I found out the issue occurs because a mousedown event happens on the map, but the scrollbar somehow prevents a mouseup event from happening, leaving the map to be dragged around.

The solution

When the map is initialized, I add eventhandlers for the mouseDown event on the map.

Microsoft.Maps.Events.addHandler(map, 'mousedown', map_mousedown);

For the displaybox I add eventhandlers for mouseenter, mouseleave and entitychanged events.

Microsoft.Maps.Events.addHandler(infobox, 'mouseenter', infobox_mouseenter);
Microsoft.Maps.Events.addHandler(infobox, 'mouseleave', infobox_mouseleave);
Microsoft.Maps.Events.addHandler(infobox, 'entitychanged', infobox_entitychanged);

In the mouseenter and mouseleave eventhandlers, I set a value indicating if the mouse is over the infobox, and reset it using entitychanged when the infobox closes.

var overInfobox = false;

function infobox_mouseenter(event) {
    overInfobox = true;
}

function infobox_mouseleave(event) {
    overInfobox = false;
}

function infobox_entitychanged(event) {
    overInfobox = false;
}

In the mousedown eventhandler for the map, this value is examined. If it is true, then the default action for the event (which is dragging the map) is prevented.

function map_mousedown(event) {
    if (overInfobox)
        event.handled = true;
}

This way, when the mouse clicks something within the infobox, it will not affect the map. The scrollbars will work, and you can drag the map outsite of the infobox (and when you close the infobox using the X in the top corner).

Answer 3

You could apply this css to a div parent of your html code:

  <style>
    .infobox{

     border: 1px solid #777 ;
     font: 11px ;
     width: 95%;
      margin:auto;
     min-height: 3em;
     max-height: 18em;
     overflow: auto;
    padding: 5px;
            }
   </style>