Legend widget remove no legend message

1229
6
Jump to solution
01-27-2019 02:47 AM
AnjithaSenarath3
New Contributor II

I am working on Arabic Javascript Application (API 4.10)   with Legend inside the layer list .  the code as below at the moment for layerlist 

var layerList = new LayerList({
view: view,
listItemCreatedFunction: function (event) {
const item = event.item;
if (item.layer.type != "group"){ // don't show legend twice
item.panel = {
content: "legend",
open: true
   };
   }
   }
});

code is working fine but it shows No Legend in English for Arabic Application. I want to get rid of "No Legend" default message  Information. How Do I do this  (I aslo dont wanted to convert that massage data to arabic as user dosnt want) . 

How to remove it ?  Please see screen capture. Kindly help 

No legent message

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

It is as simple as adding this css rule:

.esri-legend__message {
  display: none;
}

View solution in original post

6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

It is as simple as adding this css rule:

.esri-legend__message {
  display: none;
}
AnjithaSenarath3
New Contributor II

That is awesome. Thank you very much Robert 

0 Kudos
NicolasRoger
Occasional Contributor

Hello Robert,

can this also be done for a widget that is created programmatically?

I added your css rule to the .css file of the custom widget that is creating a legend widget. The text is still not hidden.

I am using the 3.x api. Maybe this is the problem?

EDIT:

Nevermind I got it. It was:

.esriLegendMsg { visibility: hidden; }
0 Kudos
AndraMathews
New Contributor III

Thank you for this post. I was able to hide the undesired text from the legend prior to loading the operational layers by adding the display properties for the div in my app as:

/* ALM added custom text to replace 'no legend default message */
#esri_dijit_Legend_0_msg {
  display: none;
}

However, is it possible to replace the text in the div with a hint such as "Use the Add Layer tool to create the Legend." from the API element (<div id="esri_dijit_Legend_0_msg" class="esriLegendMsg">No legend</div>)?

Thanks in advance for any suggestions,
A

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Andra,

   You can access this through code and change the text using:

document.getElementById('esri_dijit_Legend_0_msg').innerHTML = "Blah blah";
0 Kudos
RaoSona
New Contributor II

Hi,

I am also trying to modify the text "No Legend" to some other text. I am using 3x api. Have tried the suggestion above i.e. 

in widget.html added:

<div id="esri_dijit_Legend_0_msg" class="esriLegendMsg">No legend</div>

In style.css, added

#esri_dijit_Legend_0_msg {
  display: none;
}
The above does not turn off the label, therefore I cannot change the text via code also. Am I missing something? Is this feasible ?
0 Kudos