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

Collapse widgest (didgits) on startup

JimWharton

I have a few widgets that I'm using. (Measure tool and layers widget) These are both collapse-able but I'd like them to start closed. As useful as the measurement tool is, it's only used about 4% of the time so it would be great if I could load the map with it closed.

Is this possible?

Thanks,
-Jim

Find more posts tagged with

Accepted answers

All comments

AlexPerez

I was having the same problem (open: false & etc was not working). Adding

startexpanded="false"

did the trick.

JimWharton

😄 There are some benefits in being an untrained hack - I never notice if I have a horrid mixture - you should see some of the javascript/.asp pages I have done in the past - a total mix of syntax.

I can remember having issues over this, but can't recall the specifics, it was a long time ag (well last year sometime)

Ha! I've found that when using this framework, "untrained hackiness" is a valuable asset.

Thanks for your input on it, I'll probably use your method.

-Jim

AdrianMarsden

😄 There are some benefits in being an untrained hack - I never notice if I have a horrid mixture - you should see some of the javascript/.asp pages I have done in the past - a total mix of syntax.

I can remember having issues over this, but can't recall the specifics, it was a long time ag (well last year sometime)

JimWharton

I've not had an issue - here's my code for a collapsed at start bottom pane

        <div dojotype="dojox.layout.ExpandoPane"
            splitter="true"
            duration="125"
            region="bottom"
            title=""
            startexpanded="false"
            id="footer"
            maxwidth="275"
            style="height: 150px;">


            <div id='xyz' class='ref'></div>
        </div>

Two things of note. 1. You're specifying attributes on the DOM node itself. (a Dojo Expandopane). 2. You're using the key 'startexpanded' (not 'open'). In the docs for the measurement widget/dijit, I'm not sure this is noted as a property.

So if I can use 'startexpanded' in JS while defining the widget, then great. Even using this method is better than what I'm currently doing. But It does turn my markup into tag soup just like code from 1999. (Most dojo code tends to do that though)

AdrianMarsden

I've not had an issue - here's my code for a collapsed at start bottom pane

        <div dojotype="dojox.layout.ExpandoPane"
            splitter="true"
            duration="125"
            region="bottom"
            title=""
            startexpanded="false"
            id="footer"
            maxwidth="275"
            style="height: 150px;">


            <div id='xyz' class='ref'></div>
        </div>

JimWharton

Nope, finally got a chance to try all options.

false, 0 and null have no effect. Looks like ESRI want those widgets open when the page loads. Absolutely horrible for screen real-estate.

For now, I've triggered a click on their titlePanes. But man, that's one bloody ugly hack.

Thanks for the suggestions!

-Jim

JimWharton

Have you tried removing the single quotes around 'false'? I don't have any experience with this dijit, but when JavaScript converts the string 'false' to a boolean it becomes true.

I naturally just used a javascript false without the quotes. It never occurred to me to try it WITH quotes. I'll try it with 0 though.

JeffJacobson

Hi Jim,

I've encountered some problems with setting the 'open' parameter to false. The dijit/TitlePane would still open. Instead, I've had to use '0'. Ex:

Did not work:
<div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', open:'false'">
Worked:
<div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', open:0">

Have you tried removing the single quotes around 'false'? I don't have any experience with this dijit, but when JavaScript converts the string 'false' to a boolean it becomes true.

JakeSkinner

Hi Jim,

I've encountered some problems with setting the 'open' parameter to false. The dijit/TitlePane would still open. Instead, I've had to use '0'. Ex:

Did not work:

<div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', open:'false'">

Worked:

<div id="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title:'Measurement', open:0">

evtguy

I haven't used either of the widgets you reference but you should be able to. In your map initialization function, try adding something like:

dijit.byId('Your Measurement Widgit ID here').hide();

Another possibility could be adding a parameter on the HTML side of things. In one of my apps, I'm using a standard dijit TitlePane which defaults to an expanded state. In my HTML, I added open="false" into the line and it now loads closed by default:

<div data-dojo-type="dijit/TitlePane" id="layersList" title="<b>Show Me...</b>" open="false">

Good luck!
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.