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

TOC - Arrows instead of plus sign to expand TOC

BrianFoley1

I want to replace the plus '+' sign with an arrow for the opening and closing of an item in the TOC. Also, I want to put the arrow to the left of the checkbox. How can I do this ?

--Brian

Finde mehr Beiträge mit dem Tag

Accepted answers

RobertScheitlin__GISP

Brian,

Sure you can do that if you modify the TOC.js and the TOC.css files

In the TOC.js make this change to the templateString (to move the expand icon to the left of the checkbox):

templateString: '<div class="agsjsTOCNode">' +
    '<div data-dojo-attach-point="rowNode" data-dojo-attach-event="onclick:_onClick">' +
    '<span data-dojo-attach-point="contentNode" class="agsjsTOCContent">' +
    '<img src="${_blankGif}" alt="" data-dojo-attach-point="iconNode" />' +
    '<span data-dojo-attach-point="checkContainerNode"></span>' +
    '<span data-dojo-attach-point="labelNode">' +
    '</span></span></div>' +
    '<div data-dojo-attach-point="containerNode" style="display: none;"> </div></div>',

and add this css rule to the TOC.css:

.claro .dijitTreeExpando {
    background-image: url("images/treeExpandImages.png") !important;
    width: 16px;
    height: 16px;
    background-position: -35px 0;
}

and Add an images folder to the agsjs\dijit\css folder and then save this image into it:

All comments

RobertScheitlin__GISP

Brain,

That is pretty weird. Can you show me your TOC.css where you added the new rule?

BrianFoley1

yes, I changed the code to : <link rel="stylesheet" href="agsjs/dijit/css/toc.css">

this is what my .html page looks like :

then further down, I add a reference to TOC.js :

RobertScheitlin__GISP

Brian,

Are you referencing the TOC.css in your app?

BrianFoley1

I'm just getting the down arrows whether the layer is expanded or collapsed.

BrianFoley1

Thanks Robert, I'm almost there. I did exactly what you said, but am still getting the '+' and '-' images to toggle the laters.

RobertScheitlin__GISP

Brian,

Sure you can do that if you modify the TOC.js and the TOC.css files

In the TOC.js make this change to the templateString (to move the expand icon to the left of the checkbox):

templateString: '<div class="agsjsTOCNode">' +
    '<div data-dojo-attach-point="rowNode" data-dojo-attach-event="onclick:_onClick">' +
    '<span data-dojo-attach-point="contentNode" class="agsjsTOCContent">' +
    '<img src="${_blankGif}" alt="" data-dojo-attach-point="iconNode" />' +
    '<span data-dojo-attach-point="checkContainerNode"></span>' +
    '<span data-dojo-attach-point="labelNode">' +
    '</span></span></div>' +
    '<div data-dojo-attach-point="containerNode" style="display: none;"> </div></div>',

and add this css rule to the TOC.css:

.claro .dijitTreeExpando {
    background-image: url("images/treeExpandImages.png") !important;
    width: 16px;
    height: 16px;
    background-position: -35px 0;
}

and Add an images folder to the agsjs\dijit\css folder and then save this image into it:

BrianFoley1

Rickey, I am using nliu's TOC widget.

RickeyFight

Brian what TOC are you referring too? Can you post a link to some script?

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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