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

Custom dijit.TitlePane icon?

CraigMcDade

Is it possible to have a custom image icon in a TitlePane, instead of the generic gray dropdown box?

<div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false" src="basemap.png" style="float:right; margin-right:10px;">
<div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
<div id="basemapGallery" >
</div></div>
        </div>

I've tried adding something like src="image.png"

Trouver plus de publications taguées avec

Accepted answers

All comments

CraigMcDade

Hi,

I want to insert my image instead of titlepane default image, can i do it by modifying my div tag. I am trying the below code but this is not working for me. Could you please help me in this scenario. I don't want to do it by modifying my css

<div dojoType="dijit/TitlePane" data-dojo-props="title: '<img src=images/6.0/newdropdown.jpg>';region: 'top'" id='feedContainer' style="width:100%;background:green;text-align:center" >

I wound up using dojo.fx to get the look I was going for. A sample from my app is below. Regardless, you'll probably have to tweak the CSS a bit.
JS:

//Toggles
function basemapToggle() {
    toggler = new dojo.fx.Toggler({
        node: "basemaptoggle",
        showFunc: dojo.fx.wipeIn,
        showDuration: 1000,
        hideDuration: 1000,
        hideFunc: dojo.fx.wipeOut
    })
}
dojo.addOnLoad(basemapToggle);

HTML:

<div id="basemapbutton">
     <button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">    
      <img src="images/imgBaseMap.png"/>     
       <script type="dojo/method" event="onClick">   
        toggler[(dojo.style("basemaptoggle","display") == "none") ? 'show':'hide']();
       </script>
     </button>   
      <div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
       <div id="basemapGallery">
       </div>
      </div>
    </div>

AnkurVerma

Hi,

I want to insert my image instead of titlepane default image, can i do it by modifying my div tag. I am trying the below code but this is not working for me. Could you please help me in this scenario. I don't want to do it by modifying my css

<div dojoType="dijit/TitlePane" data-dojo-props="title: '<img src=images/6.0/newdropdown.jpg>';region: 'top'" id='feedContainer' style="width:100%;background:green;text-align:center" >

DavideLimosani

ok, that's not a titlepane! Title pane has the same width for header and pane. I suggest you to use dojo.fx.Toggler to achieve a similar result http://dojotoolkit.org/reference-guide/1.8/dojo/fx/Toggler.html

post your code if you have problems

CraigMcDade

DavideLimosani

I don't think I'm explaining what I am trying to do very well. Essentially I want to completely replace the gray boxes (and arrows) so that when you click on the custom image it opens the panes.

I'm trying to copy what is done in a majority of the local government apps and put icons in the place of the gray buttons.

I've tried converting to a dijit.form.ToggleButton but couldn't get it to work.

I think that we said you how to completely replace the gray boxes (and arrows), but maybe you can post a local government app link
to be sure to understand you well?

CraigMcDade

I don't think I'm explaining what I am trying to do very well. Essentially I want to completely replace the gray boxes (and arrows) so that when you click on the custom image it opens the panes.

I'm trying to copy what is done in a majority of the local government apps and put icons in the place of the gray buttons.

I've tried converting to a dijit.form.ToggleButton but couldn't get it to work.

khutchins

Are you referring to the arrows? If so you can modify them using the .dijitArrowNode classes. The title pane arrows the widget uses by default are all defined in one sprite:

http://ajax.googleapis.com/ajax/libs/dojo/1.8.0/dijit/themes/claro/images/spriteArrows.png

Then the appropriate arrow (down, up) is defined by setting the position of that particular arrow within the sprite. So in this example if we created a new sprite that contained the replacement icons you wanted to use you could define the url here:

.claro .dijitTitlePane .dijitArrowNode {
background-image: url("http://localhost/myArrows.png");
}

Then for each of the closed, open etc states you could set the position of the image you want to display.
.claro .dijitTitlePane .dijitClosed .dijitArrowNode{
background-position:0 0;
}

DavideLimosani

ah the grey triangles. So You have to work with these two classes

.claro .dijitTitlePane .dijitClosed .dijitArrowNode {
    background-position: -14px 0;
}
.claro .dijitTitlePane .dijitArrowNode {
    background-image: url("images/spriteArrows.png");
    background-repeat: no-repeat;
    height: 8px;
    width: 7px;
}

For example you can do something like this:

.claro .dijitTitlePane .dijitClosed .dijitArrowNode {
    background-position: 0px 0;
    background-image: url("yourOpenImage");
    height: 8px;  // change with your image dimensions
    width: 7px;   // change with your image dimensions
}
.claro .dijitTitlePane .dijitArrowNode {
    background-image: url("yourCloseImage");
    background-repeat: no-repeat;
    height: 8px;   // change with your image dimensions
    width: 7px;   // change with your image dimensions
}

Ih this way you have the same image for all of your titlepane headers.

If you want to have different images I think you can:

1) do a dojo.query to get every single image starting from the titlepane id and replace them

2) override the titlepane class with a dojo.declare adding an image to the header that you can change for every titlepane instance.

I don't know if these are the best solutions anyway.

I have no time now, i will try to be more specific in the next post if you need more help.

CraigMcDade

thanks for your response. The ultimate goal is to replace those gray buttons completely with other images. I have 4 titlepanes which I would like to have different icons (basemap gallery, search, legend, layers).

DavideLimosani

Do you simply want to change the color of your titlepane header?

If I have understood correctly, override this in your css


.claro .dijitTitlePaneTitle {
    background-image: url("yourimage");
}

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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