changing the structure of the Legend dijit

[RichardKaufholz]

Hi Everyone,

I am trying to modify the legend widget so that the swatch and label are shown on one line (i.e. adjacent to eachother). The default dijit places the swatch below the label.

In this example, it is shown as I would like it:
http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_legend.html

The problem I am having is that the design is not controlled by CSS/styling, but has a completely different HTML structure. In checking the code of the sample above, I can see that the HTML structure is:
[HTML]<tr>
  <td>SWATCH</td>
  <td>
    <table>
      <tr>
         <td>LABEL</td>
      </tr>
    </table>
  </td>
</tr>[/HTML]

however, in the default dijit, it is drawn as:
[HTML]<tr>
  <td>LABEL</td>
</tr>
<tr>
  <td>SWATCH</td>
</tr>[/HTML]

Strange, since as far as I can tell, the default and demo both use the same dijit! Does anyone know how I can setup the legend to match the demo?

Thanks,
Richard.

[timgogl]

i have used the legend, inside a panel like that example. you shouldnt need to modify the html inside the dijit.... if the legend div is wide enough, the icon/label will be side by side. if the div is not wide enough, it will auto wrap.

[RichardKaufholz]

Hi lowgas,

Thanks for getting back to me. Unfortunately, its not the width of the div that is causing the legend to  wrap - logically, such wrapping would be controlled by the CSS, but as I showed in the code samples below, the actual HTML structure seems to come out different in the sample and the demo. The structure that is created in using the sample wont allow the label to be adjacent because it is placed in the next table row element (TR).

You can also see from the attached jpg that setting the width much larger than the legend entries doesnt solve the problem.

Rich.

[timgogl]

hrm... interesting.

i am kinda stuck for an idea... i just used pretty much the code directly from the sample, and mine come out side by side.

[RichardKaufholz]

Ok, so I did some more in-depth comparison of the code - and think I have the answer. Unfortunately, the dijit doesnt put the patch adjacent to the label at all - it puts the sub-category label there 😮

In the esri demo, the first set of icons for "Points of Interest" are in fact sub categories of that layer itself, styled using unique symbols - the actual layer label is above the patches. In scrolling down to the Fire Perimeter layer you will see the standard layer-label combination without any classification.

So I guess its not possible unless you write the code yourself! I am also going to try see if I can work around it by "cheating" the label and sub label text in the source MXD, but not holding out too much hope.

Thanks anyway.

[timgogl]

maybe 'cheat' it with in-line styles?