map not resizing in dojo layout; v3.9

aubinmaynard · ‎05-29-2014

I have a map in a dojo layout, including a side area, then an area with a map and a extendopane. When the pane collapses, the map does not resize. However, when i resize the page, the map auto resize. Any thoughts as to how to force the map to resize when minimizing the pane?

Thanks,

UjjwalNarayan1 · ‎05-29-2014

I have a map in a dojo layout, including a side area, then an area with a map and a extendopane. When the pane collapses, the map does not resize. However, when i resize the page, the map auto resize. Any thoughts as to how to force the map to resize when minimizing the pane?

Thanks,

Can you post the HTML for your layout? I think using a border container to wrap the map content pane and expandopane should solve the problem. Whenever a layout widget resizes it calls resize() on all its child widgets, looks like in your case map.resize() is not being called. You can always force a map.resize() using the titlePane 'onShow', 'onHide' events.

aubinmaynard · ‎06-02-2014

Thanks for the reply, here's the body code. I feel like i have it wrapped correctly, but I might be missing something.

 <body class="claro">
   <div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;"> 
<!-- Header Section-->
        <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
          <div id="title">
          
          <div style="width:100%; background-color:#996; ">
<div class="pagetitle" >
Anacsotia Restoration Plan Map 

</div></div>
          
          
          </div><!--end title-->
        </div>

  <div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
     <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Instructions', selected:true">
        This pane could contain tools or additional content
        <div id="toggle" style="padding: 2px 2px;"></div>
      </div>
  <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Search'">
        This pane could contain tools or additional content
        <div id="toggle" style="padding: 2px 2px;">
        <table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
      <td class="dropdown_title">Subwatershed</td>
</tr>
<tr>
    <td>
      <select class="dropdown"  id="SubWS"  > 
        <option value="">--All--</option> 
        
        <option value="Sligo Creek">Sligo Creek</option>
        <option value="Northwest Branch">Northwest Branch</option>
        <option value="Paint Branch">Paint Branch</option> 
        <option value="Little Paint Branch">Little Paint Branch</option>   <option value="Indian Creek">Indian Creek</option>
        <option value="Upper Beaverdam Creek">Upper Beaverdam Creek</option> 
        <option value="Still Creek">Still Creek</option>
        <option value="Brier Ditch">Brier Ditch</option>
        <option value="Northeast Branch">Northeast Branch</option>
        <option value="Lower Beaverdam">Lower Beaverdam Creek</option>  
        <option value="Watts Branch">Watts Branch</option>
        <option value="Fort DuPont Tributary">Fort Dupont Tributary</option> 
        <option value="Pope Branch">Pope Branch</option> 
        <option value="Hickey Run">Hickey Run</option>
        <option value="Tidal River Reach">Tidal River Reach</option>
        </select> 
    </td>
  </tr>
  <tr>
      <td class="dropdown_title">Project Type</td>
</tr>
<tr>
    <td><select class="dropdown" id="ProjectTyp" > 
      <option value="">--All--</option> 
      <option value="Stormwater Retrofit">Stormwater Retrofit</option> 
      <!-- long value "wrapped" by repeating value in 2 option calls-->
      <option value="Stream Restoration">Stream Restoration</option> 
      
      <option value="Wetland Creation/Restoration">Wetland Creation/Restoration</option> 
      <option value="Fish Blockage Removal/Modification">Fish Blockage Removal/Modification</option>
      <option value="Riparian Reforestation, Meadow Creation, Street T*">Riparian Reforestation, Meadow Creation,  </option> 
      <option value="Riparian Reforestation, Meadow Creation, Street T*">    Street Trees and Invasives Management</option> 
      
      <option value="Trash Reduction">Trash Reduction</option>
      <option value="Parkland Acquisition">Parkland Acquisition</option>
      </select> 
    </td>
  </tr>
  <tr>
      <td class="dropdown_title">Ownership</td>
</tr>
<tr>
    <td><select class="dropdown" id="Ownership" > 
      <option value="">--All--</option> 
      
      
  <option value="Public">Public</option>
  <option value="Private">Private</option>
      
    </select></td>
  </tr>
  <tr>
            <td class="dropdown_title">Subwatershed Unit</td>
</tr>
<tr>
    <td> <select class="dropdown" id="Unit"  > 
      <option value="">--All--</option> 
      
  <option value="Upper">Upper</option>
  <option value="Middle">Middle</option>
  <option value="Lower">Lower</option>
      
    </select></td>
  </tr>
  <tr>
            <td class="dropdown_title">Year (after 2001) </td>
</tr>
<tr>
          <td><input  style="width:100%"  type="text" id="year" value="example only" /></td>
</tr>
  <tr>
            <td class="dropdown_title">tbd</td>
</tr>
<tr>
      <td>tbd</td>
</tr>
  </table>
          <button id="doquery"></button>
</div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend'">
        <div id="legendDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Layers & Tools'">
        Turn on layers:<br>
        <button id="turnOnOff"></button>
        <div id="toggle" style="padding: 2px 2px;"></div>
      </div>
    </div>
  </div>

  <div id="LeftPane"
       data-dojo-type="dijit/layout/BorderContainer"
       data-dojo-props="region:'left'" style=" height: 100%; margin: 0;">
  <div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       >
  </div>
  <div id="map2"
       data-dojo-type="dojox/layout/ExpandoPane" data-dojo-props="duration:300, title:'Details', region:'bottom', maxHeight:'300px', easeIn:'easing.linear', easeOut:'easing.linear'"
           style="height:300px;"
              >teste
  </div><!--end map2-->
  </div>
  </div>
</body>

UjjwalNarayan1 · ‎06-03-2014

Your LeftPane should have "region:'center'" instead of "region:'left' so that the outer BorderContainer has atleast one region:'center' ContentPane

From http://dojotoolkit.org/reference-guide/1.6/dijit/layout/BorderContainer.html
There must always be one region marked �??center�??.