topic Re: Override esri jsapi dijit css in ArcGIS JavaScript Maps SDK Questions

Override esri jsapi dijit css

DavidHollema — Wed, 14 Dec 2011 14:03:20 GMT

I notice the ESRI dijits I'm using have their own styles in css that are pulled from the CDN (I'm using the CDN-hosted api, v2.5). At times, I'd like to override some of those styles with my own local styles. Since the esri css are loaded last, they always trump any local styles I have set. The only workaround I found is to use !important. For example, for the editor template picker:

.templatePicker {
        margin-top: 10px;
        border:none !important; /*override esri legend.css*/
      }

to override this css...

http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/editing/css/TemplatePicker.css

I don't think this is the best approach but don't know of another way.

Re: Override esri jsapi dijit css

JeffPace — Wed, 14 Dec 2011 15:31:08 GMT

I notice the ESRI dijits I'm using have their own styles in css that are pulled from the CDN (I'm using the CDN-hosted api, v2.5). At times, I'd like to override some of those styles with my own local styles. Since the esri css are loaded last, they always trump any local styles I have set. The only workaround I found is to use !important. For example, for the editor template picker:

.templatePicker {
        margin-top: 10px;
        border:none !important; /*override esri legend.css*/
      }

to override this css...

http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/editing/css/TemplatePicker.css

I don't think this is the best approach but don't know of another way.

If you add a class to your <BODY class="override tundra"> and then add a css entry as

.override .templatePicker {
        margin-top: 10px;
        border:none
      }

It will pick yours first, since "override" comes before "tundra" in the list

Re: Override esri jsapi dijit css

DavidHollema — Thu, 15 Dec 2011 14:47:47 GMT

Thanks for your response. Yes, your suggestion does work.

html
<body class="override nihilo">

css
.override .templatePicker
    {
        margin-top: 15px;
        border:none;
    }

I believe the reason it works is not because class override is assigned before class nihilo, in my case, but because the css selector ".override .templatePicker" has higher specificity than simply ".templatePicker". The ".templatePicker" class selector is not in the dojo nihilo or tundra, etc. themes but rather in a separate css pulled from ESRI CDN.

http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/editing/css/TemplatePicker.css

Therefore, this works too -> <body class="nihilo override">

Thx.

If you add a class to your <BODY class="override tundra"> and then add a css entry as

.override .templatePicker {
        margin-top: 10px;
        border:none
      }

It will pick yours first, since "override" comes before "tundra" in the list

Re: Override esri jsapi dijit css

JeffPace — Thu, 15 Dec 2011 14:49:24 GMT

Thanks for your response. Yes, your suggestion does work.

html
<body class="override nihilo">

css
.override .templatePicker
    {
        margin-top: 15px;
        border:none;
    }

I believe the reason it works is not because class override is assigned before class nihilo, in my case, but because the css selector ".override .templatePicker" has higher specificity than simply ".templatePicker". The ".templatePicker" class selector is not in the dojo nihilo or tundra, etc. themes but rather in a separate css pulled from ESRI CDN.

http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/editing/css/TemplatePicker.css

Therefore, this works too -> <body class="nihilo override">

Thx.

You are absolutely correct. Sorry off day.