topic Re: Add a Second Pane to Left Side in ArcGIS JavaScript Maps SDK Questions

Add a Second Pane to Left Side

ChrisHolmes — Fri, 07 Nov 2014 14:09:20 GMT

Hello all,

I have a javascript application that uses the following CSS/HTML to create the displayed output:

#leftPane {  
     margin:5px; /*added this, seems to align #leftPane & #map a bit nicer*/  
     width:200px; /*300px;*/  
     color:#3C1700;  
     background-color:#FFF;  
     }

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">  
     <div>Click the pin below then click location on map to add your comment.</div>  
     <div id="templatePickerDiv"></div>  
</div>

I would like to add a pane to the lower left area, so that it will look like the below picture but am having difficulty figuring out how to change the code. I had read something about having to nest the panes but haven't figured anything out. Any help appreciated! Thanks

Re: Add a Second Pane to Left Side

ChrisHolmes — Fri, 07 Nov 2014 14:13:12 GMT

For some reason the HTML didn't paste in above:

<div>Click the pin below then click location on map to add your comment.</div>

</div>

Re: Add a Second Pane to Left Side

TimWitt2 — Fri, 07 Nov 2014 14:19:48 GMT

Chris,

here is an example of 2 panes:

ArcGIS API for JavaScript Sandbox

Tim

Re: Add a Second Pane to Left Side

TimWitt2 — Fri, 07 Nov 2014 14:21:21 GMT

Ohh never mind, my example doesn't solve your issue. Let me see if I can post something else.

Re: Add a Second Pane to Left Side

JakeSkinner — Fri, 07 Nov 2014 14:27:29 GMT

Here is the html you could use:

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">
   <div id="templatePickerDiv"></div>
   <div id="legend"></div>
</div>

Here is the CSS:

#leftPane {
    width:300px;
    color:#3C1700;
    background-color:#FFF;
}
  
#templatePickerDiv{
    border-style:solid;
    border-color: #3C1700;
    height: 49%;
}
  
.templatePicker {        
    height: 49% !important;
}      
  
#legend{
    margin-top:5px;
    border-style:solid;
    border-color: #3C1700;
    border-width:thin;
    height: 49%;
}

Re: Add a Second Pane to Left Side

ChrisHolmes — Fri, 07 Nov 2014 15:25:44 GMT

Thanks for your time Tim, appreciated!

Re: Add a Second Pane to Left Side

ChrisHolmes — Fri, 07 Nov 2014 15:26:20 GMT

Hi Jake, thanks for the reply. I’m just playing around with this now. Will let you know how it goes.

Chris

Re: Add a Second Pane to Left Side

ChrisHolmes — Fri, 07 Nov 2014 15:59:18 GMT

I now have it looking as below. What I find interesting is if I try to move the text "Click the pin..." into the div with the add comment pin, for example I tried this: <div id="templatePickerDiv>abc</div>. When the page renders the "abc" is drawn underneath the "Add Comment".

Can you tell me:

1. what is the significance of !important

2. As far as design goes, what's best? I currently have 2 div's within a left pane. It looks ok, I guess, but is there a better way I should look at doing this?

Thanks,

Chris

Re: Add a Second Pane to Left Side

JakeSkinner — Fri, 07 Nov 2014 16:17:04 GMT

1. Take a look at the following link.

What does !important mean in CSS?

2. A personal preference of mine is to use an AccordionContainer. See the following example:

Map container split in three | ArcGIS API for JavaScript

Re: Add a Second Pane to Left Side

ChrisHolmes — Fri, 07 Nov 2014 16:50:21 GMT

Thanks Jake, I’m going to look into the AccordionContainer, it’s a nice looking layout.