Add a Second Pane to Left Side

[ChrisHolmes]

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

[ChrisHolmes]

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

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

[TimWitt2]

Chris,

here is an example of 2 panes:

ArcGIS API for JavaScript Sandbox

Tim

[TimWitt2]

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

[ChrisHolmes]

Thanks for your time Tim, appreciated!

[JakeSkinner · Accepted solution]

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

[ChrisHolmes]

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

Chris

[ChrisHolmes]

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

[JakeSkinner]

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

[ChrisHolmes]

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