topic Re: CSS for Legend doesn't work correctly in ArcGIS JavaScript Maps SDK Questions

CSS for Legend doesn't work correctly

EricPfirman — Tue, 10 Jul 2012 12:37:03 GMT

The Legend widget doesn't seem to be reading all of the style settings. In the sample below, it sets the background-color correctly, but not the font-size, font-style or color. Is this a bug?

<style type="text/css">
    .esriLegendGroupLayer
    {
     background-color:Blue
    }
    .esriLegendLayer
    {
     background-color:Silver;
     font-size:xx-small;
     font-style:italic;
     color:Green
    }
    .esriLegendLayerLabel
    {
     background-color:Gray;
     font-size:xx-small
    }
    .esriLegendService
    {
     display:none;
     background-color:transparent
    }
    .esriLegendServiceLabel
    {
     display:none;
        background-color:transparent
    }
</style>
...
    function showLegend() {
        var legend = new esri.dijit.Legend({ map: map }, "legendDiv");
        legend.startup();
    }

Re: CSS for Legend doesn't work correctly

MattLane — Sat, 11 Dec 2021 12:06:54 GMT

If you are overriding esri's css and it isn't working, you can try adding !important to the styles.

For example

.esriLegendLayer
{
  background-color:Silver;
  font-size:xx-small !important;
  font-style:italic !important;
  color:Green !important;
}

Re: CSS for Legend doesn't work correctly

EricPfirman — Thu, 12 Jul 2012 17:02:39 GMT

The !important did not have any effect.

Re: CSS for Legend doesn't work correctly

RamaChintapalli — Wed, 18 Jul 2012 20:15:09 GMT

Eric,

I was able to override the legend dijit CSS. See the attached sample and screenshot.