topic Difference between 3.5 and 3.9 API - Problems with Tabs, Content/Accordion Pane in ArcGIS JavaScript Maps SDK Questions

Difference between 3.5 and 3.9 API - Problems with Tabs, Content/Accordion Pane

IanPeebles — Sat, 11 Dec 2021 13:53:52 GMT

I have recently installed the latest JS API version 3.9 up from version 3.5. I have an application that contains tabs where all of the tools are located. I have created a content pane with an accordion container. Has something changed between the 3.5 and 3.9 API? The application loads fine, but when clicking on each tab, the frame for the tools are not inside the tab when using the 3.9 version of the API. The code I use in the index.htm and layout.css is exactly the same. Below are some screenshots and a block of code.

Does anyone have any ideas? Below is some of the code that contains the content and accordion pane.

Incorrect Display:

[ATTACH=CONFIG]34739[/ATTACH]

Correct Display:

[ATTACH=CONFIG]34740[/ATTACH]

Here is the block of code I use within the index.htm:

<!-- TABLE OF CONTENTS -->
  <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" splitter="true">
 
    <div data-dojo-type="dijit.layout.AccordionContainer" id="accordion" onfocus="Text1ToolWrapper">
    
      <!-- MAP LAYERS -->
      <div data-dojo-type="dijit.layout.ContentPane" id="maplayersPane" title="Map Layers" style="background-color: #FFFFFF">
       <div id="tocDiv"></div>
      </div>
      
      <!-- DRAWING TOOLS -->
                        <div data-dojo-type="dijit.layout.ContentPane" id="drawingPane" title="Drawing Tools">

       <div id="drawingtoolspointsframe">
         <div id="drawingtoolspointstitle"><center><b>Draw Points</b></center></div>
         <div id="drawingtoolspointstext">
         To draw a point, use a single left mouse click on the map.
        </div>
        <div id="drawingtoolspointtoolsbuttonframe">
                                    <center>
             <button data-dojo-type="dijit.form.Button" onClick="Point1ToolWrapper" id=

What do I need to change to get the frame containing the tools within the tab?

Any help that can be provided will be appreciated.

Re: Difference between 3.5 and 3.9 API - Problems with Tabs, Content/Accordion Pane

Anonymous User — Sat, 11 Dec 2021 13:53:55 GMT

Original User: dcoley

Hi Ian-
Typically what you are seeing are the results of small syntax changes in dojo. Plus keep in mind your meta tag name and content properties have to be set up as well. I have had issues with certain dijits not displaying correctly in IE 8 and lower. Nevertheless, I've been able to migrate all of my html divs, etc since 3.5 and am using 3.9 now. Here is a sample from a simple lookup app:

  <div id="bcMain" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters: 'true', liveSplitters:'true'">
       <div id="cpLeading" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', region:'leading'">
        <div data-dojo-type="dijit/layout/AccordionContainer">
         <div id="legendPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Half Sections', selected:true">
          <div id="leftInstruct">Check layers on and off.</div>
           <div id="tocDiv"></div>
          </div>
          <div id="findPane" data-dojo-type="dijit/layout/AccordionPane" data-dojo-props="title: 'Search Tools', selected:false">
           <select id="comboSelect"> <!--data-dojo-type="dijit/form/ComboBox">-->
           </select>
           <button id="search" data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="button" >Search       
             </button>
          </div>
         </div>
        </div>
     <div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
      <div id="divSearch"></div>
      <div id="HomeButton"></div>
      <div id="LocateButton"></div>
        <div style="position:absolute; right:20px; top:10px; z-Index:999;"><!--"tpBaseMap" data-dojo-type="dijit/TitlePane" -->
         <div data-dojo-type="dijit/TitlePane"
           data-dojo-props="title:'Change Basemap', closable:false,  open:false">
         <div data-dojo-type="dijit/layout/ContentPane" style="width:275px; height:100px; overflow:auto;"><!--style="width:380px; height:280px; overflow:auto;"> 275px for 2-->
      <div id="basemapGallery"></div></div> 
         </div>
       </div>
     </div>
  
     <div id="cpTop" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> <!--splitter: 'true', -->
      <img src="css/sclogoHeaderOnly.png" alt="ScLogo" width="120" height="45"align="left"/>Sarasota County Half Sections
      <div id="subheader2">Click on Sections for Sheet Info</div>
      <div id="subheader3"></div>
      <div id="subheader4">941-861-5000</div>
     </div>
      <!--<div id="cpBottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter: 'false', region: 'bottom'">
       <div id="divGrid"></div>
   </div>-->
   </div>

Thanks
David

Re: Difference between 3.5 and 3.9 API - Problems with Tabs, Content/Accordion Pane

IanPeebles — Sat, 11 Dec 2021 13:53:58 GMT

Hi Ian-
Typically what you are seeing are the results of small syntax changes in dojo. Plus keep in mind your meta tag name and content properties have to be set up as well. I have had issues with certain dijits not displaying correctly in IE 8 and lower. Nevertheless, I've been able to migrate all of my html divs, etc since 3.5 and am using 3.9 now. Here is a sample from a simple lookup app:

  <div id="bcMain" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters: 'true', liveSplitters:'true'">
       <div id="cpLeading" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:'true', region:'leading'">
        <div data-dojo-type="dijit/layout/AccordionContainer">
         <div id="legendPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Half Sections', selected:true">
          <div id="leftInstruct">Check layers on and off.</div>
           <div id="tocDiv"></div>
          </div>
          <div id="findPane" data-dojo-type="dijit/layout/AccordionPane" data-dojo-props="title: 'Search Tools', selected:false">
           <select id="comboSelect"> <!--data-dojo-type="dijit/form/ComboBox">-->
           </select>
           <button id="search" data-dojo-type="dijit/form/Button" type="button" data-dojo-attach-point="button" >Search       
             </button>
          </div>
         </div>
        </div>
     <div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
      <div id="divSearch"></div>
      <div id="HomeButton"></div>
      <div id="LocateButton"></div>
        <div style="position:absolute; right:20px; top:10px; z-Index:999;"><!--"tpBaseMap" data-dojo-type="dijit/TitlePane" -->
         <div data-dojo-type="dijit/TitlePane"
           data-dojo-props="title:'Change Basemap', closable:false,  open:false">
         <div data-dojo-type="dijit/layout/ContentPane" style="width:275px; height:100px; overflow:auto;"><!--style="width:380px; height:280px; overflow:auto;"> 275px for 2-->
      <div id="basemapGallery"></div></div> 
         </div>
       </div>
     </div>
  
     <div id="cpTop" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> <!--splitter: 'true', -->
      <img src="css/sclogoHeaderOnly.png" alt="ScLogo" width="120" height="45"align="left"/>Sarasota County Half Sections
      <div id="subheader2">Click on Sections for Sheet Info</div>
      <div id="subheader3"></div>
      <div id="subheader4">941-861-5000</div>
     </div>
      <!--<div id="cpBottom" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter: 'false', region: 'bottom'">
       <div id="divGrid"></div>
   </div>-->
   </div>

Thanks
David

Hmm.. I looked at your code and it looks similar to what I have. Do you have any other examples? You mentioned meta tag name and content properties. Do you have an example? Are there any references on the changes between versions?