Add a Second Pane to Left Side

721
9
Jump to solution
11-07-2014 06:09 AM
ChrisHolmes
Occasional Contributor III

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>

OneLeftPane.png

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

TwoLeftPanes.png

0 Kudos
1 Solution

Accepted Solutions
JakeSkinner
Esri Esteemed Contributor

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

}

View solution in original post

0 Kudos
9 Replies
ChrisHolmes
Occasional Contributor III

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>

0 Kudos
TimWitt2
MVP Regular Contributor

Chris,

here is an example of 2 panes:

ArcGIS API for JavaScript Sandbox

Tim

0 Kudos
TimWitt2
MVP Regular Contributor

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

0 Kudos
ChrisHolmes
Occasional Contributor III

Thanks for your time Tim, appreciated!

0 Kudos
JakeSkinner
Esri Esteemed Contributor

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

}

0 Kudos
ChrisHolmes
Occasional Contributor III

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

Chris

0 Kudos
ChrisHolmes
Occasional Contributor III

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

LeftPaneV2.png

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

0 Kudos
JakeSkinner
Esri Esteemed Contributor

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

0 Kudos
ChrisHolmes
Occasional Contributor III

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

0 Kudos