nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Legend widget remove no legend message

AnjithaSenarath3

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

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

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

It is as simple as adding this css rule:

<SPAN class="selector token">.esri-legend__message</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

RaoSona

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 ?

RobertScheitlin__GISP

Andra,

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

document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'esri_dijit_Legend_0_msg'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">"Blah blah"</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

Anonymous User

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

NicolasRoger

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; }

AnjithaSenarath3

That is awesome. Thank you very much Robert

RobertScheitlin__GISP

It is as simple as adding this css rule:

<SPAN class="selector token">.esri-legend__message</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.