none
Map type menu doesnt show properly RRS feed

  • Question

  • Hei there :),

    I am integrating bing maps on my site, inside of a iframe and this happens to my map. Anyone has any clue why do the letters show up like in the left image?  Then i as inspecting the items and in class labelToggle_Container labelStyle i saw the attribute word-break: break-word; which if i deactivate the text changed and stays like on the image at the right.

    Anyone has a clue? Why this happens?

    https://s21.postimg.org/ejw61j03b/rendering.png

    (sorry for the link but i still cant post images)

    Best regards

    JMRMourao



    • Edited by JMRMourao Thursday, October 13, 2016 10:18 AM
    Thursday, October 13, 2016 10:17 AM

Answers

  • Ok, sounds like an issue with the bootstrap API not namespacing their CSS. I'll pass this information on to the dev team to see if we can work around this somehow from our end.

    [Blog] [twitter] [LinkedIn]

    Monday, October 17, 2016 7:07 PM
  • A simple solution for the main issue is to add this to your page:

     <style>
     .MicrosoftMap * {
      box-sizing:content-box;
     }
     </style>

    I'll have our devs plan to add this the next time they are working with the infobox class. This won't resolve all possible issues that overriding global settings would do, but should resolve the main issue here.


    [Blog] [twitter] [LinkedIn]

    Thursday, November 10, 2016 8:58 PM
  • I'm not able to reproduce this. I've tried adding a simple map page to a second page via an iframe and the label button text looks fine. I've tested on IE11, Edge, and Chrome using the release branch of the SDK. Are you using the frozen or experimental branch of Bing Maps V8? Can you provide a simple code sample tat reproduces this issue?

    [Blog] [twitter] [LinkedIn]

    Thursday, October 13, 2016 6:12 PM
  • Finally was able to find the issue. It didnt came to my mind right away, but i was using bootstrap and two classes conflict with bing maps. Namely this two in this scenario

    label.labelStyleSwitch {

        font-family: 'Segoe UI','San Francisco',Helvetica,Arial,Sans-Serif;
        font-size: 12pt;
        ;
        width: 268px;
        line-height: 20px;
        text-indent: 92px;
        margin: 10px 0;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        top: -7px;
        max-width: 268px;
    }

    label.labelStyleSwitchDescription {

         font-family: 'Segoe UI','San Francisco',Helvetica,Arial,Sans-Serif;
        font-size: 9pt;
        opacity: .6;
        ;
        width: 268px;
        line-height: 20px;
        text-indent: 92px;
        margin: 10px 0;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        top: 7px;
        max-width: 268px;
    }

    Possibly there are some small perks due to this problem as well.

    Thanks for the availability and fast response

    Best regards

    João Mourão

    • Marked as answer by JMRMourao Tuesday, October 18, 2016 9:56 AM
    Monday, October 17, 2016 12:35 PM
  • The team has looked into this issue and have found that bootstrap does namespace their CSS class names as well and there is no conflicting CSS class names. Please ensure that you are using the latest version of bootstrap.

    [Blog] [twitter] [LinkedIn]

    Wednesday, November 9, 2016 7:19 PM
  • I finally managed to reproduce the issue. The issue is that bootstrap CSS is setting global styles for body, HTML and * which apply to everything in the page. This is something that needs to be handled in either bootstrap or your app, not the Bing Maps side of things. The only way to prevent things like this happening from the Bing Maps side of things is to specify every possible CSS style for every element in the map, which no one does as it doesn't make sense to do that. Bootstrap really shouldn't be forcing global styles like this.


    [Blog] [twitter] [LinkedIn]

    Thursday, November 10, 2016 8:38 PM

All replies

  • I'm not able to reproduce this. I've tried adding a simple map page to a second page via an iframe and the label button text looks fine. I've tested on IE11, Edge, and Chrome using the release branch of the SDK. Are you using the frozen or experimental branch of Bing Maps V8? Can you provide a simple code sample tat reproduces this issue?

    [Blog] [twitter] [LinkedIn]

    Thursday, October 13, 2016 6:12 PM
  • Finally was able to find the issue. It didnt came to my mind right away, but i was using bootstrap and two classes conflict with bing maps. Namely this two in this scenario

    label.labelStyleSwitch {

        font-family: 'Segoe UI','San Francisco',Helvetica,Arial,Sans-Serif;
        font-size: 12pt;
        ;
        width: 268px;
        line-height: 20px;
        text-indent: 92px;
        margin: 10px 0;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        top: -7px;
        max-width: 268px;
    }

    label.labelStyleSwitchDescription {

         font-family: 'Segoe UI','San Francisco',Helvetica,Arial,Sans-Serif;
        font-size: 9pt;
        opacity: .6;
        ;
        width: 268px;
        line-height: 20px;
        text-indent: 92px;
        margin: 10px 0;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        top: 7px;
        max-width: 268px;
    }

    Possibly there are some small perks due to this problem as well.

    Thanks for the availability and fast response

    Best regards

    João Mourão

    • Marked as answer by JMRMourao Tuesday, October 18, 2016 9:56 AM
    Monday, October 17, 2016 12:35 PM
  • Ok, sounds like an issue with the bootstrap API not namespacing their CSS. I'll pass this information on to the dev team to see if we can work around this somehow from our end.

    [Blog] [twitter] [LinkedIn]

    Monday, October 17, 2016 7:07 PM
  • The team has looked into this issue and have found that bootstrap does namespace their CSS class names as well and there is no conflicting CSS class names. Please ensure that you are using the latest version of bootstrap.

    [Blog] [twitter] [LinkedIn]

    Wednesday, November 9, 2016 7:19 PM
  • I understand but for example in another case i had with the infobox actions. The infobox class inherit some parts from the bootstrap, and only enforcing on my CSS i was able to correct the issue. I am using bootstrap 3.3.5, so its one of the latest 

    Thursday, November 10, 2016 3:28 PM
  • I finally managed to reproduce the issue. The issue is that bootstrap CSS is setting global styles for body, HTML and * which apply to everything in the page. This is something that needs to be handled in either bootstrap or your app, not the Bing Maps side of things. The only way to prevent things like this happening from the Bing Maps side of things is to specify every possible CSS style for every element in the map, which no one does as it doesn't make sense to do that. Bootstrap really shouldn't be forcing global styles like this.


    [Blog] [twitter] [LinkedIn]

    Thursday, November 10, 2016 8:38 PM
  • A simple solution for the main issue is to add this to your page:

     <style>
     .MicrosoftMap * {
      box-sizing:content-box;
     }
     </style>

    I'll have our devs plan to add this the next time they are working with the infobox class. This won't resolve all possible issues that overriding global settings would do, but should resolve the main issue here.


    [Blog] [twitter] [LinkedIn]

    Thursday, November 10, 2016 8:58 PM