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

Title Pane close on start

MathewSuran

This should be an easy question that I can not figure out. How do I set the title pane to default closed on startup? Right now the default is open(expanded) when it loads. This is different then .leftpanevisibility to hide the entire content pane. Thanks!

Find more posts tagged with

Accepted answers

evtguy

Ok, well, here's another option on the JS side of things you can try while your application loads. You basically tell the titlePane to close programatically. Here's my same example as before but using this JS method instead of specifying it on the HTML side of things:

[HTML]<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>

<script>dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

<script>
   dojo.require("dijit.TitlePane");

   function init() {
    dijit.byId("tp2").set("open",false);
   };

   dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="tp2" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'I\'m a TitlePane Too'">
   Click arrow to close me.
</div>
</body>
</html>[/HTML]

Now, the app you inherited may be structured a little different but the key line is that one line of code in my example's init function.

All comments

MathewSuran

Awesome! I used the .set("open",false) from your code which worked perfectly. Here's what I did:

var tp1 = new dijit.TitlePane({title: "Description"});
            tp1.set('content', configOptions.description).set("open",false);
            detailCp.addChild(tp1);

Thanks for your help!

evtguy

MathewSuran

Thanks for that. The way it is set up is that when you click on the toolbar button, the left pane appears. I have figured out in JS where that takes place and have changed some things around already. There is no specific TitlePane HTML code, just the leftpanel code I provided. Utilizing "inspect element" in Chrome, I have figured out the hierarchy of the TP. It goes boardercontainer, stackcontainer,contentpane,tp1,2,3.

evtguy

ok, gotcha. So you do have a bunch of code already but don't understand it all. I would search through your HTML code for the text "dijit.TitlePane". It's within THAT html code that you would add the data-dojo-props like I originally suggested.

Here's a VERY basic example, written in legacy:
[HTML]<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>

<script>dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>

<script>
dojo.require("dijit.TitlePane");
</script>
</head>
<body class="claro">
<div id="tp2" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'I\'m a TitlePane Too', open: false">
Click arrow to close me.
</div>
</body>
</html>[/HTML]

A borderContainer is a higher level object. It's used like a "box" in which you add other objects. I can't be 100% sure without seeing that other code but I suspect your titlePane with be located down a level or two from a borderContainer.

MathewSuran

Basically I was given a project that was 75% complete and I have had to reverse engineer to figure out what the company had done. I am completely new to all of this and have been figuring it out as I go along. I posted the HTML code 3 posts ago but here it is again:
[HTML]<div data-dojo-type="dijit.layout.BorderContainer" id="leftPane" data-dojo-props="design:'headline', gutters:false,region:'left'" style="height:100%;padding:0;display:none;">
</div>[/HTML]

Let me know if you need more than that.

evtguy

Are you literally starting from scratch? You asked about legacy code so I thought you already had some code / HTML written.

MathewSuran

That is the HTML code I'm working with.

evtguy

Can you post your HTML code? That would be the best way to help.

MathewSuran

I cant figure out how to add your suggestion to what I have:

[HTML]<div data-dojo-type="dijit.layout.BorderContainer" id="leftPane" data-dojo-props="design:'headline', gutters:false,region:'left'" style="height:100%;padding:0;display:none;">
</div>[/HTML]

MathewSuran

Haha you know what assuming does...:D

I figured the slashes for periods from the dojo webpage but can not seem to figure out where to integrate properly into the layout of my HTML. Ill keep messing with it. Thx.

evtguy

The *ONE* time I assume someone is using AMD... LOL. 😄

Actually, not much different. Here's an HTML line for a contentPane from one of my legacy projects:
[HTML]<div id="dataLayerSection" dojoType="dijit.layout.ContentPane" title="Data Layers" data-dojo-props="label:'Click to Expand'" selected="true">[/HTML]

So basically the forward slashes become periods.

MathewSuran

How different would that be for legacy?

evtguy

Wouldn't use just set one of it's properties with data-dojo-props on the HTML side of things like this:
[HTML]<div data-dojo-type="dijit/TitlePane" data-dojo-props="open: false"></div>[/HTML]

Steve

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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