none
V8 - CSS classes not namespaced? RRS feed

  • Question

  • According to Bing Maps V8 "What's New?": https://msdn.microsoft.com/en-us/library/mt770019.aspx

    Microsoft Maps CSS namespacing

    All CSS classes used by the Bing Maps V8 SDK have been namespaced with a MicrosoftMaps namecpace to reduce the likelihood of naming collisions with CSS classes from other libraries.

    This is not true.  In the navigation bar that let's you toggle between road, aerial, and streetside views, I see a nested DIV containing this:

    <div id="RadialMenu" class="NavBar_DropDown menu" role="listbox">
    The "menu" CSS class is not namespaced, which is colliding with the Zurb Foundation CSS class of the same name and causing this menu to render extremely poorly.


    Craig Hutchison Software Engineer Experient, Inc.


    Monday, September 19, 2016 6:00 PM

Answers

  • If you can provide me a list of which style names are causing the most issues I can have the team look at changing those individual names. Going through and updating all the CSS names throughout the map control isn't really an option.

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, September 21, 2016 7:22 PM
    • Marked as answer by Ricky_Brundritt Thursday, September 22, 2016 5:51 PM
    Wednesday, September 21, 2016 7:22 PM
  • Actually, this is true. If you inspect the div and look at the CSS classes it is referencing, all of the classes have .MicrosoftMap first, which means that these styles will only apply to elements who have both or who's parent has the MicrosoftMaps and NavBar_DropDown CSS classes. For example, if you create an element outside of the map and give it the NavBar_DropDown CSS class name, since it doesn't have a parent with a MicrosoftMap CSS class name, the Bing Maps CSS will have no effect on that element.

    It sounds like the real issue is that the Zurb Foundation CSS class isn't namespaced.


    [Blog] [twitter] [LinkedIn]

    Tuesday, September 20, 2016 12:27 AM

All replies

  • Actually, this is true. If you inspect the div and look at the CSS classes it is referencing, all of the classes have .MicrosoftMap first, which means that these styles will only apply to elements who have both or who's parent has the MicrosoftMaps and NavBar_DropDown CSS classes. For example, if you create an element outside of the map and give it the NavBar_DropDown CSS class name, since it doesn't have a parent with a MicrosoftMap CSS class name, the Bing Maps CSS will have no effect on that element.

    It sounds like the real issue is that the Zurb Foundation CSS class isn't namespaced.


    [Blog] [twitter] [LinkedIn]

    Tuesday, September 20, 2016 12:27 AM
  • I guess I was thinking that instead of "menu" you'd have something like "MicrosoftMap_menu", so the prefix is part of the class name and not just some parent farther up the DOM.

    Craig Hutchison Software Engineer Experient, Inc.

    Tuesday, September 20, 2016 11:32 PM
  • If you can provide me a list of which style names are causing the most issues I can have the team look at changing those individual names. Going through and updating all the CSS names throughout the map control isn't really an option.

    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Wednesday, September 21, 2016 7:22 PM
    • Marked as answer by Ricky_Brundritt Thursday, September 22, 2016 5:51 PM
    Wednesday, September 21, 2016 7:22 PM