CSS Naming conflicts within API

[HeathClark]

While there may be other cases, the use of the class 'container' in such a generic form is causing conflicts when trying to incorporate Bootstrap styling into an ESRI map based site.

ex. within a map-display / map class : <div id="map_div_root" class="container".....<div id="map_div_container" class="container">..
the generic use of "container" generates a side effect of a max-width of the map being set by Bootstrap.

While this can be overcome with some basic css, would using an esri- prefix within js.api generated objects all but eliminate current and future css conflicts?  Some of the more popular "add-ons" are revising their naming conventions to avoid such conflicts (Font Awesome is a great example as they just changed their icon- prefix to fa-).  Just an idea/suggestion.

[ReneRubalcava]

An "esri-" prefix would be awesome. You should submit that to http://ideas.arcgis.com/

[StephenLead]

+1 to this.

I had to rename the .container class in Bootstrap, which I'm sure will bite me when they update Bootstrap and I forget about it 😉

[HeathClark]

+1 to this.

I had to rename the .container class in Bootstrap, which I'm sure will bite me when they update Bootstrap and I forget about it 😉

For what its worth:
I just added [HTML]#map_div_container, #map_div_root
{
    max-width:10000000px;
}[/HTML] to my template/default .css file.  Simple solution without messing with Bootstrap.

dh

[JonathanUihlein]

As eitdhc suggested, I would just edit the default stylesheet instead of messing with bootstrap settings.

In esri.css:

.map .container {
    border: medium none;
    height: 100%;
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    top: 0;
    width: 100% !important;
}

As expected, there is no specific styling for a standalone '.container' node in esri.css.
It must be a child of a '.map' div.