4

Trying to add styles to a dijit is difficult enough, as I have to track down the classes it uses after it loads. I've managed to do that, but I'm struggling to find the appropriate classes to alter for the menu that pops out from the esri Print Dijit (esri.dijit.Print) that lists the different layout options. This doesn't show up in the structure in the browser's development environment, so I can't track them.

Is there a better way to find and alter these style classes?

1

After hunting through the generated html in Print Templates with esri.request example, I found that the generated menu is of type dijit.Menu. If you want to style it, Here's a very condensed version of the html, which will help you reskin it using css. This is by no means a comprehensive list of classes or table structure. It's just a boiled down version to help modify the styling. In this example, the second choice is hovered over.

<div class="dijitMenuPopup">
  <table class="dijitMenuTable">
    <tr class="dijitMenuItem">
      <td class="dijitMenuIconCell">
        <!-- image icon probably goes here -->
      </td>
      <td class="dijitMenuIconLabel">
         Letter ANSI Portrait
         <!-- label here -->
      </td>
      <td class="dijitMenuItemAccelKey">
        <!-- I don't know what goes here -->
      </td>
      <td class="dijitMenuArrowCell">
         <!-- if a submenu is present, the arrow goes here -->
      </td>
    </tr> 
    <tr class="dijitMenuItem dijitMenuItemSelected dijitMenuHover dijitHover">
      <td class="dijitMenuIconCell">
        <!-- image icon probably goes here -->
      </td>
      <td class="dijitMenuIconLabel">
         Letter ANSI Landscape
         <!-- label here -->
      </td>
      <td class="dijitMenuItemAccelKey">
        <!-- I don't know what goes here -->
      </td>
      <td class="dijitMenuArrowCell">
         <!-- if a submenu is present, the arrow goes here -->
      </td>
    </tr> 
  </table>
</div>
2
  • You're a rockstar! Cheers for the help with this. I ran the page again and opened up the menu, then rechecked the gerenated html, but this time I used find to search for the text. There it was! Right at the bottom of the code. I was searching around inside the parent element. Thanks again. I really appreciate this help. – MierMoto Sep 30 '13 at 22:53
  • Thanks. Yeah, I had a hard time finding it, too. I had to use the search as well. – raykendo Oct 1 '13 at 2:51
-2

Nope, dijits are very difficult to change unless you have the source code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.