How do I change legend incorrect symbology, or remove

FranklinAlexander — Sun, 12 Dec 2021 10:48:49 GMT

Ok, I need lots of help on this one. The legend is not rendering the correct color for one of the symbols and I either need to be able to correct the error, of removed the symbol completely. Cannot seem to do either. The legend is showing results from a query that can be and average score, max score, count, or count/area. The legend symbol is a color ramp with a 'unique' color symbol just above that apparently will only show an average, or the color from the center of the color ramp. This works fine for all of the queries accept for the max score, and I need it to show the color representing the top(max) part of the ramp.

The symbol color for the 'Top Final Score' should be red to reflect a score greater than 206. I think I can get the results layer info to apply the correct color to the symbol, but I don't know how/where the color is applied. If this isn't possible, the second choice would be to remove the symbol altogether, which I am able to do by placing this code in the Legend 'start' function:

document.querySelector('.esriLegendLayer', this.domNode).getElementsByTagName('td')[0].style.display = "none";‍

This has the desired effect of removing the symbol, but leaving the label 'Top Final Score'. The problem is that on 'refresh', the symbol appears again. I tried placing the same code in the 'refreshLegend' function, but that function isn't called when the legend is refreshed! If I know where the function is that gets called on 'refresh' and think I am good.

I also tried the css route, but so far have not been able to access the <td> element that houses the symbol, since there is no class name or id. I tried the following in the css file:

//this removes both the symbol and the label
.esriLegendLayer:nth-of-type(2) tr:first-child td:first-child {
    display: none;
}

///also tried///
//this does nothing
.esriLegendLayer:first-of-type  tr:first-child td:first-child {
    display: none;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

plus about 20-30 other variations. What's weird is that there are two elements with the .esriLegendLayer class name, the first of which contains the <td> element I want to remove, but I have only had luck with the nth-of-type(2) selector. ???

Here is the HTML structure:

<table cellpadding="0" cellspacing="0" width="95%" class="esriLegendLayer">
  <tbody>
    <tr>
      <td width="35" align="center">  //only need to hide this column
        <div style="width:30px;height:30px;">
          <svg overflow="hidden" width="30" height="30" style="touch-action: none;"> 
             <defs></defs><path fill="rgb(253, 174, 97)" fill-opacity="0.95" 
             stroke="rgb(224, 224, 224)" stroke-opacity="0.9019607843137255" stroke- 
              width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke- 
              miterlimit="4" path="M -10,-10 L 10,0 L 10,10 L -10,10 L -10,-10 Z" d="M- 
              10-10L 10 0L 10 10L-10 10L-10-10Z" fill-rule="evenodd" stroke- 
              dasharray="none" dojoGfxStrokeStyle="solid" 
 transform="matrix(1.00000000,0.00000000,0.00000000,1.00000000,15.00000000,15.00000000)">
              </path>
           </svg>
         </div>
       </td>
     <td>
       <table width="95%">
         <tbody>
           <tr>
             <td align="left">Avg Final Score</td> //this element stays
           </tr>
         </tbody>
       </table>
     </td>
   </tr>
  </tbody>
</table>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks for any suggestions.

Re: How do I change legend incorrect symbology, or remove

FranklinAlexander — Sun, 12 Dec 2021 10:48:51 GMT

Ok, this is what finally worked:

.esriLegendLayer:nth-child(2) > tbody > tr > td:first-child {
    display: none;
}‍‍‍

I would still like to know if there is a way to apply the correct color to the 'unique' color symbol above the color ramp based on the type of search (Top Final Score) if anyone can help.

Thanks!

topic Re: How do I change legend incorrect symbology, or remove in Web AppBuilder Custom Widgets Questions

How do I change legend incorrect symbology, or remove

Re: How do I change legend incorrect symbology, or remove