topic Re: CSS Naming conflicts within API in ArcGIS JavaScript Maps SDK Questions

CSS Naming conflicts within API

HeathClark — Wed, 06 Nov 2013 21:51:38 GMT

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.

Re: CSS Naming conflicts within API

ReneRubalcava — Wed, 06 Nov 2013 21:57:25 GMT

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

Re: CSS Naming conflicts within API

StephenLead — Wed, 06 Nov 2013 22:35:25 GMT

+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 😉

Re: CSS Naming conflicts within API

HeathClark — Mon, 25 Nov 2013 20:40:31 GMT

+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

Re: CSS Naming conflicts within API

JonathanUihlein — Mon, 25 Nov 2013 21:30:09 GMT

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.