map not resizing in dojo layout; v3.9

aubinmaynard — Thu, 29 May 2014 09:14:23 GMT

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,

Re: map not resizing in dojo layout; v3.9

UjjwalNarayan1 — Thu, 29 May 2014 13:04:41 GMT

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.

Re: map not resizing in dojo layout; v3.9

aubinmaynard — Sat, 11 Dec 2021 09:26:21 GMT

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>

Re: map not resizing in dojo layout; v3.9

UjjwalNarayan1 — Tue, 03 Jun 2014 20:02:55 GMT

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�??.

topic map not resizing in dojo layout; v3.9 in ArcGIS JavaScript Maps SDK Questions

map not resizing in dojo layout; v3.9

Re: map not resizing in dojo layout; v3.9

Re: map not resizing in dojo layout; v3.9

Re: map not resizing in dojo layout; v3.9