none
Bing Maps V8 infobox .infobox-actions height problem RRS feed

  • Question

  • Hi,

    I have problem with infobox-actions height. (Cant show in pictures cause my account not verified yet). It is always stays 15px so text does no fit. If I change in dev tools it to auto then it is ok. How I can fix this. It is on all browsers.

    Thanks

    DL

    Thursday, December 22, 2016 9:45 AM

Answers

  • Infobox actions are deprecated in bing maps v8. Don't use them. Instead just use custom html and pass it into the description.

    [Blog] [twitter] [LinkedIn]

    Thursday, December 22, 2016 8:01 PM
  • In your code sample you are setting  the actions property, which is the infobox action functionality that is deprecated. That said, I tried your code and added several different lengths of title/descriptions and couldn't reproduce the issue you have in your screenshot. Which browser are you using?

    In regards to using HTML, you can write any HTML and simply pass it into the description field. Use buttons or anchors to create your own actions. Here is an example of passing in HTML into the description of an Infobox:

    http://www.bing.com/api/maps/sdk/mapcontrol/isdk#infoboxWithIFrame+JS

    Here is a code sample that adds a link:

    var infobox1 = new Microsoft.Maps.Infobox(map.getCenter(), { 
    	title: 'Hello World',
    	description: '<a href="javascript:void(0)" onclick="myEvent(\'This is infobox 1.\')">Click Me</a>' 
    });
    infobox1.setMap(map);
    
    function myEvent(msg){
    	alert(msg);
    }


    [Blog] [twitter] [LinkedIn]

    Friday, December 23, 2016 6:22 PM

All replies

  • Infobox actions are deprecated in bing maps v8. Don't use them. Instead just use custom html and pass it into the description.

    [Blog] [twitter] [LinkedIn]

    Thursday, December 22, 2016 8:01 PM
  • Thank you for the answer but I dont get it. We have ASP.NET webforms site with masterpage. We use bootstrap.

    The infobox I create in ashx handler like 

    Output += "infobox = new Microsoft.Maps.Infobox(map.getCenter(), {title: '', visible: false, description: '', actions: [{ label: 'Lauko informacija', eventHandler: InfoBoxHandler} ]}); ";
    Output += " infobox.setMap(map);";

    Later I reuse this infobox when mouse is over some polygon. I am not trying to use infobox actions. Infobox actions I found inspecting CSS and I see that problem is in

    .MicrosoftMap .Infobox .infobox-actions {
    1. border-top1px solid #888;
    2. margin0 0 -4px;
    3. padding4px 0;
    4. font-size.9em;
    5. clearboth;
    6. padding4px 8px 8px;
    7. color#676767;
    8. font-size.9em;
    9. height15px;  <<------ Height

    By meaning "use custom html" you mean sample https://www.bing.com/api/maps/sdk/mapcontrol/isdk#addCustomInfobox+JS ?

    I not sure how to do that in my case. 

    DL



    • Edited by DariusLLL Friday, December 23, 2016 10:51 AM
    Friday, December 23, 2016 10:50 AM
  • In your code sample you are setting  the actions property, which is the infobox action functionality that is deprecated. That said, I tried your code and added several different lengths of title/descriptions and couldn't reproduce the issue you have in your screenshot. Which browser are you using?

    In regards to using HTML, you can write any HTML and simply pass it into the description field. Use buttons or anchors to create your own actions. Here is an example of passing in HTML into the description of an Infobox:

    http://www.bing.com/api/maps/sdk/mapcontrol/isdk#infoboxWithIFrame+JS

    Here is a code sample that adds a link:

    var infobox1 = new Microsoft.Maps.Infobox(map.getCenter(), { 
    	title: 'Hello World',
    	description: '<a href="javascript:void(0)" onclick="myEvent(\'This is infobox 1.\')">Click Me</a>' 
    });
    infobox1.setMap(map);
    
    function myEvent(msg){
    	alert(msg);
    }


    [Blog] [twitter] [LinkedIn]

    Friday, December 23, 2016 6:22 PM