Legend not showing layer names

97
1
Jump to solution
04-27-2021 06:55 AM
MattiasEkström
Regular Contributor

Hi!

I'm extending the LayerList Widget by adding a tab container so that I have the layerlist in one tab and a Legend in the other tab. I've come pretty far but my problem is that my Legend does not show any layer names, group layer names or map service names. It only shows "layer swatches labels" if there is one.

Se attached screenshot.

I can't find any properties to the Legend dijit to control this behavior, and I have the styles for the labels in my css. Any ideas why the names doesn't show?

0 Kudos
1 Solution

Accepted Solutions
MattiasEkström
Regular Contributor

Figured it out myself.
If anyone else comes across this and wonder, Ii was a style/css issue, even though I added some styles for the legend in the css I hadn't looked through the (very long) style.ccs-file for LayerList. It already had a part with legend-styles where some parts (the missing ones) had the display property set to none which explains why they didn't show up.

 

/*********legend css from LegendDijit************/
.jimu-widget-layerList .esriLegendService {
  padding-bottom: 0;
}
.jimu-widget-layerList .esriLegendLayerLabel {
  padding-top: 0;
  height: 0;
  display: none;
}
.jimu-widget-layerList .esriLegendServiceLabel {
  display: none;
}
.jimu-widget-layerList .esriLegendLayer{
  font-size: 12px;
}

.jimu-widget-layerList .esriLegendMsg{
  display: none;
}

 

 

View solution in original post

0 Kudos
1 Reply
MattiasEkström
Regular Contributor

Figured it out myself.
If anyone else comes across this and wonder, Ii was a style/css issue, even though I added some styles for the legend in the css I hadn't looked through the (very long) style.ccs-file for LayerList. It already had a part with legend-styles where some parts (the missing ones) had the display property set to none which explains why they didn't show up.

 

/*********legend css from LegendDijit************/
.jimu-widget-layerList .esriLegendService {
  padding-bottom: 0;
}
.jimu-widget-layerList .esriLegendLayerLabel {
  padding-top: 0;
  height: 0;
  display: none;
}
.jimu-widget-layerList .esriLegendServiceLabel {
  display: none;
}
.jimu-widget-layerList .esriLegendLayer{
  font-size: 12px;
}

.jimu-widget-layerList .esriLegendMsg{
  display: none;
}

 

 

View solution in original post

0 Kudos