AnsweredAssumed Answered

Trouble with map not resizing within a Dojo ExpandoPane

Question asked by evtguy on Aug 30, 2012
Latest reply on Aug 30, 2012 by geos_rfleet
I've pieced together a webpage template with a small header, a collapsible left panel (using the dojo ExpandoPane) and the rest of the screen is devoted to the map area. If the browser window's width is changed, the map will resize accordingly. If the ExpandoPane is minimized using the button, the map simply moves left and does not resize to fit the enlarged screen space.

It's probably something simple but I can't figure out where I've gone wrong. Anyone out there see my mistake?

Here's my stripped down page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=7" />   <!--The viewport meta tag is used to improve the presentation and behavior of the samples     on iOS devices-->   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>   <title>Template</title>     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>   <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/layout/resources/ResizeHandle.css"/>   <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/layout/resources/ExpandoPane.css"/>     <style type="text/css">    html, body {      width: 100%;      height: 100%;      margin: 0;      background-color:#DEDEDE; overflow:hidden;      font-family: Arial, Helvetica, sans-serif;    }        #borderContainer {      width: 100%;      height: 100%;      padding:3px    }        #mapPanel {     background: #CFCFCF;     height: 100%;     width: 100%    }        #map {     width:100%;     height: 100%    }        #leftPanel {     background: #F8F8F8;     margin: 0px;     height: 100%;     width: 35%    }     #headerPanel {     background: #FFFFFF;     padding: 3px;     height:6%;     padding-bottom: 5px;     border-bottom: solid 3px black    }        #contentPanel {     height: 94%;     width: 100%    }        .claro .dijitAccordionTitle {     color: #5B5B5B;    }     .claro .dijitAccordionTitleHover {     color: #000000;    }     .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle {     color: #000000;     font-weight: bold    }        .dojoxExpandoTitleNode {     color: #8A8A8A;     font-size: 85%;     font-weight: normal;     font-style: italic    }     .claro .dijitTooltipContainer    {     font-weight:bold;    }        </style>     <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>   <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>   <script type="text/javascript">    dojo.require("esri.map");    dojo.require("dijit.dijit"); // optimize: load dijit layer    dojo.require("dijit.layout.BorderContainer");    dojo.require("dijit.layout.ContentPane");    dojo.require("dojox.layout.ExpandoPane");    dojo.require("dojo.parser");    dojo.require("esri.dijit.Popup");       dojo.require("dijit.layout.AccordionContainer");    dojo.require("dijit.Tooltip");    dojo.require("dijit.Dialog");           var map;    var dialogBox;        function init() {     var initialExtent = new esri.geometry.Extent({       "xmin": -13592500,"ymin": 6060280,"xmax": -13506825,"ymax": 6166129,"spatialReference": {"wkid": 3857}     });         var popup = new esri.dijit.Popup(null, dojo.create("div"));            map = new esri.Map("map", {       extent: initialExtent     });      dojo.connect(map, 'onLoad', function(theMap) {       dojo.connect(window, 'resize', map, map.resize);     });      var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");     map.addLayer(basemap);       //resize the map when the browser resizes     dojo.connect(dijit.byId('map'), 'resize', function(map) {      map.resize;     });      //resize the map when the ExpandoPane resizes     dojo.connect(dijit.byId('leftPanel'), 'onHide', function(map) {      map.resize;     });       }     // resize the map window when the browser window is resized    function resizeMap() {     map.resize();     map.reposition();    }         dojo.ready(function(){       // create a new Tooltip and connect it to the panes within the accordion widget       new dijit.Tooltip({        connectId: ["closureSection_button", "dataLayerSection_button","mapLegendSection_button","disclaimerSection_button"],        label: "Click to view this section"       });    });        dojo.addOnLoad(init);   </script>  </head>  <body class="claro" onresize="resizeMap();">    <div id="headerPanel" dojotype="dijit.layout.BorderContainer" class="dijitContentPane">     <div style="width:100%;height:100%">      <SPAN style="width:100%"><SPAN style = "font-size:185%;font-weight:900;padding-left:5px;text-shadow: 1px 1px #CFCFCF">A Page Title</SPAN>     </div>    </div>      <div id="contentPanel" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer">       <div id="leftPanel" data-dojo-type="dojox.layout.ExpandoPane" title="Click the Arrow to Minimize this Panel" data-dojo-props="title: 'To Minimize this Panel, Click the Arrow', splitter:true, region:'leading'" style="width: 400px;">      <div dojoType="dijit.layout.AccordionContainer">        <div id="closureSection" dojoType="dijit.layout.ContentPane" title="Content Section 01" data-dojo-props="label:'Click to Expand'" selected="true">        </div>        <div id="dataLayerSection" dojoType="dijit.layout.ContentPane" title="Content Section 02" data-dojo-props="label:'Click to Expand'">        </div>        <div id="mapLegendSection" dojoType="dijit.layout.ContentPane" title="Content Section 03" data-dojo-props="label:'Click to Expand'">        </div>        <div id="disclaimerSection" dojoType="dijit.layout.ContentPane" title="Content Section 04">        </div>             </div>         </div>         <div id="mapPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:true, region:'center'" style="border-style:solid, border-width:1px;border-color:black;padding:0px !important">      <div id="map" ></div>     </div>    </div>  </body> </html>

Outcomes